z-index与定位产生的IE与W3C的不同表现

#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，所以绿色一直在上面