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

position:absolute从中删除.below

更新的演示

给一个元素一个绝对或相对的位置，以及一个 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;
}