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>

Answer 2

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

Internet Explorer中的Z-Index

2 个答案: