最好的
解释方法是通过示例:http://jsfiddle.net/e7JjU/
我对 z 索引和堆叠上下文有很好的理解,但我无法弄清楚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>
您的红色div,#div2
没有z索引。但#div1
和#inner
这样做。如果要将 z 索引放在#div2
则蓝色div 不会出现在绿色div 和红色div 之间。
Z 索引适用于父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>