css - 为什么这个 div 在另外两个嵌套的 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>