css - この div が他の 2 つのネストされた div の間にあるのはなぜですか? z-index 関連

Question

これを説明する最良の方法は、例を使用することです: http://jsfiddle.net/e7JjU/

z-index とスタック コンテキストについてはよく理解していますが、赤と緑のスタックの間に div1 (青) が表示される論理的な理由がわかりません。誰かがこれを説明できますか？

#div1{ 
    width: 200px;
    height: 50px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 15px;
    z-index: 1;
}
#div2 {
    width: 200px;
    height: 50px;
    position: relative;
    top: -50px;
    background-color: red;
}
#inner{
    width: 200px;
    height: 50px;
    position: relative;
    top: 40px;
    left: 30px;
    background-color: green;
    z-index: 2;
}

そしてHTML...

<div id="div1"></div>

<div id="div2">
    <div id="inner"></div>
</div>​
​

Answer 1

赤い div に#div2は z-index がありません。しかし#div1、#innerやります。z-index をオン#div2にすると、緑の div と赤の div の間に青い div が表示されなくなります。

z-index は親 div と子 div に適用されます。

<div id="div1" style="z-index:1"></div>


<div id="div2" style="z-index:2">
   <div id="div4" style="z-index:4;"><!--Higher than any of the other divs--></div>
</div>

<div id="div3 style="z-index:3">
    <div><!-- any div inside div3 are higher than div1 and div2 but not div4</div>
</div>