Internet Explorer 中的 Z 索引答案

【问题标题】：Z-Index in Internet ExplorerInternet Explorer 中的 Z 索引
【发布时间】：2011-03-22 11:25:51
【问题描述】：

我正在尝试让z-index 在我的 HTML 代码中工作。我已经在几个地方查看了这个，它说我需要在我的 div 中添加一个位置。我已经这样做了，但仍然无法正常工作。下面是我用于z-index 的 CSS 和 HTML。

CSS：

.Location{
    width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: auto;
}

.logo{
     background-color: white;
     position: relative;
     left: 40px;
     float: left;
     width: 225px;
     z-index: 10;
     padding-left: 15px;
     padding-bottom: 20px;
     padding-top: 20px;
}

【问题讨论】：

请告诉我们你在分层什么。请提供标记。

标签： css internet-explorer internet-explorer-8 z-index

【解决方案1】：

好吧，您还没有发布任何 HTML，所以有点难以帮助您。但是这些文章应该可以帮助您了解如何正确使用z-index：

【讨论】：

【解决方案2】：

应用 z-index 是正确的：相对、固定或绝对类型的位置。 IE 的问题在于它不像在其他浏览器中那样在整个文档中全局应用元素的 z-index。

在 IE 中，z-index 仅在堆叠上下文中应用，它由应用了相对位置、固定位置或绝对位置的任何元素自动创建。

因此，您很可能会遇到以下情况，这就是 z-index 无法按预期工作的原因：

<div style="position: relative">
   <div style="position: relative; z-index: 1;">
   </div>
</div>
<div style="position: relative">
   <div style="position: relative; z-index: 2;">
   </div>
</div>

在上面，所有浏览器但 IE 总是将 z-index: 2 div 放在 z-index: 1 之上。然而，IE 不会总是，因为这两个元素都在自己的堆叠上下文，因此它们的 z-index 并不适用于彼此。

解决方法是将 z-index 添加到创建单独堆叠上下文的父元素：

<div style="position: relative; z-index: 1;">
   <div style="position: relative;">
   </div>
</div>
<div style="position: relative; z-index: 2;">
   <div style="position: relative;">
   </div>
</div>

【讨论】：