css - z 索引和相对位置

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 “定位”在顶部的下方。单独应用相对位置不会做任何事情，您需要开始移动目标元素以查看堆叠效果。

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

Answer 2

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

当框在视觉上重叠时，z-index才有意义。

Answer 3

在相对定位的情况下，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;
         }

Answer 4

您已将float两个元素都编辑到左侧。它们不重叠，因此z-index不做任何事情。

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