demo：
div{position:relative;}
p{position:absolute;}
.a{background:#f00;z-index:10;}
.b{background:#0ff;z-index:3;}
<div class="test">
<p class="a">asdas</p>
</div>
<div class="test2">
<p class="b">asdas</p>
</div> 细心的你会发现上述代码在IE6,7下的呈现与高级浏览器下不同。.test1和.test2未设置z-index，在高级浏览器下不会产生新的局部层叠上下文，也就是说它们的子元素没有被新的局部层叠上下文包裹，那么它们的子元素就处在同一个层叠上下文中，可以直接通过自身的层叠级别来决定显示顺序，所以结果是.a 覆盖了.b，因为.a的层叠级别比.b高；而在IE6,7下，.test1和.test2会产生新的局部层叠上下文，即它们的子元素被新的局部层叠上下文包裹，于是子元素显示顺序只能依赖.test1和.test2层叠级别来确定。所以结果是.b 覆盖了.a，因为.b的父元素.test2在HTML文档流中排在.test1之后，后来者居上覆盖前者。参见demo: z-index创建局部层叠上下文在IE6,7下与高级浏览器下的区别