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て、ではなくコンテナを指定します。.aboveposition: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;
}