z 指数和位置相对

Question

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

我看到它在绝对位置工作：http://jsfiddle.net/WwXVV/2/
但为什么不在相对位置：http://jsfiddle.net/WwXVV/

谁能解释为什么在相对位置和这种特定情况下，具有较高 z 指数的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 索引仅在框在视觉上重叠时才相关。

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;
         }