#container {
position: relative;
background-color: red;
width: 300px;
height: 400px;
z-index:1;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
<div id="container">
<div id="box1">这个box应该在上面z-index:20</div>
</div>
<div id="box2">z-index:10这个box应该在下</div>
结果:
改变:#container {
position: relative;
background-color: red;
width: 300px;
height: 400px;
}
结果:
原因:只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。而例子中被相对定位的元素并没有定义 z-index,即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。即背景色为黄色的 box1 和背景色为绿色的 box2 的 stacking context 相同,即都为根元素产生的 root stacking context。再根据规则中当 stacking context 一样的时候,就用 z-index 的值来决定怎样显示的原理,则应该 z-index 属性值 20 的背景色为黄色的 box1 在 z-index 属性值 10 背景色为绿色的 box2 之上。
但是IE不同:
都会创建stacking context,所以绿色一直在上面