IE下postion relative被叠加的issue

为了fix这个bug试了个例子：

<div style="height: 200px; width: 300px; background: green;">
<div style="height: 100px;">
<div style="position: relative;background: yellow; height: 100px; z-index: 2;" >
<div style="position: relative;background: gray; height: 100px;" >
<div style="position: absolute; top: 80px; height: 100px; width: 300px; background: red;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
<div style="position: relative; height:30px; background: #fff;">
test test test test test test
</div>
</div>

直接这么在IE6打开，红色的这个绝对定位的div会被下面白色的relative给叠在上面了。

可以肯定是层叠次序的问题。

在红色的绝对定位框上加z-index: 2， 无效
在灰色的相对定位框上加z-index: 2， 无效
在黄色的相对定位框上加z-index:2， 有效

也就是白色的相对定位框同级节点或者该节点中包含的最外层的相对（绝对）上设置z-index在IE下才有效