Question

w3c说z-index“仅适用于定位元素（位置：绝对;，位置：相对;或位置：固定;）。”

我认为它在绝对位置有效：http://jsfiddle.net/WwXVV/2/
但为什么不在相对位置：http://jsfiddle.net/WwXVV/

任何人都可以解释为什么在相对位置和在这种特定情况下，具有较高z-index的div不在顶部？

CSS：

#top {
    position:relative;
    float:left;
    width:100px; height:100px;
    background-color:yellow;
    z-index:1; 
}

#bottom {
    position:relative;
    float:left;
    width:100px; height:100px;
    background-color:blue; 
    z-index:0;
}

HTML：

<div id="top"></div>
<div id="bottom"></div>

Answer 1

你只是将它们漂浮在一起。将left应用于底部div：

#bottom { left: -100px; }

这将做的是将“底部div”置于顶部div下面。单独应用相对位置将无法执行任何操作，您需要开始移动目标元素以查看堆叠效果。

如果您想知道绝对定位，它的工作方式会有所不同。绝对定位将元素从文档流中取出（意味着它不会影响其他元素的布局），并且默认情况下将其放在其第一个祖先的左上角，其值不是position:static，所以你的元素都堆叠在一起。

Answer 2

左边有两个元素float。它们不重叠，因此z-index没有做任何事情。

如果您将margin-left: -20px添加到右侧框中，您将看到所需的效果。

Answer 3

简单，position:relative和float:left; div将彼此相邻。使用position: absolute，他们将忽略float:left;并将两个元素放在同一位置，使用z-index显示谁在前面。

当盒子在视觉上重叠时，

z-index才是相关的。

Answer 4

在相对定位的情况下，z-index工作正常。试试这段代码

  #top {
       position:relative;
       top:20px;
       left:0px;
       width:100px; height:100px;
       background-color:yellow;
       z-index:1; 
       }

 #bottom {
      position:relative;
      top:0px;
      left:30px;
      width:100px; height:100px;
      background-color:blue; 
      z-index:0;
      }

绝对定位

 #top {
       position:absolute;
       top:0px;
       left:20px;
       top:0; left:0;
       width:100px; height:100px;
       background-color:yellow;
       z-index:1; 
      }

 #bottom {
          position:absolute;
          top:20px; left:50px;
          width:100px; height:100px;
          background-color:blue; 
          z-index:0;
         }

z指数和位置相对

4 个答案: