如何在另一个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

从position:absolute

中删除.below

Updated demo

为元素提供绝对或相对的位置，以及z-index，创建本地堆叠上下文。这意味着对于任何绝对或相对定位的子节点，它们的z-index是相对于它们的父节点（本地堆栈上下文），而不是父节点之外的元素的z-index。

如果.below需要绝对定位，请将.below和.above放入容器中，并为容器position:absolute而不是.below。

Answer 2

只需锻炼此代码。

HTML

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

CSS

.below{
 position:absolute;
 top:20px;
z-index:0;
 }
.middle{
position:absolute;
z-index:0;
}
.above{
 position:absolute;
z-index:-1;
}