html - 如何在另一个div前面获取一个div的子元素？

Question

我试图在另一个 div 前面获取一个 div 的子元素，但 z-index 似乎只在 div 内工作:

HTML:

<div class="below">
  <div class="above">Oben!</div>
</div>

<div class="middle"></div>

CSS:

.below{
  position:absolute;
  z-index:0;
}

.middle{
  position:absolute;
  z-index:1;
}

.above{
  position:absolute;
  z-index:2;
}

我希望类按顺序出现:下方、中间、上方。这是一个 jsFiddle 来说明我的问题:http://jsfiddle.net/1Blerk/jH4vX/

Answer 1

从 .below 中移除 position:absolute

Updated demo

给一个元素一个绝对或相对的位置，以及一个 z-index，创建一个本地堆叠上下文。这意味着对于任何绝对或相对定位的子元素，它们的 z-index 是相对于它们的父元素(局部堆叠上下文)的，而不是相对于父元素之外的元素的 z-index。

如果.below需要绝对定位，那么把.below和.above放在一个容器里，给容器 position:absolute 而不是 .below。