css - Internet Explorer 中的 Z 索引

Question

我正在尝试让 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;
}

Answer 1

您得到的是应用 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>