IE6下绝对定位的DIV被相对定位的DIV挡住的问题

http://blog.sina.com.cn/s/blog_4be6505c0101cicr.html

 

今天在做项目的时候，遇到了一个问题，在一个div中，有个绝对的div，不论这个绝对定位的div的z-index多大，都会被其它相对定位的div挡住，这个问题只限在ie6下，其它的浏览器却没有问题。最初的代码如下：
<style>
        #div1{position:relative; background:#FF0000; width:200px; height:100px; zoom:1;}
        #div2{position:absolute; background:#FFFF00; width:49px; height:50px; left:176px; top:110px; z-index:99;}
        #div3{position:relative; background:#000000; width:200px; height:100px;}
        #div4{position:relative; background:#9900FF; width:200px; height:100px;}
</style>

<div id="div1">
   <div id="div2"></div>
</div>
<div id="div3"></div>
<div id="div4"></div>

在IE6下的效果如下：


原因：在ie6下，不论绝对定位的z-index有多大，比如图中的div2，如果父层的div的z-index小于或者等于其它层的z-index，则div2会被其它的div覆盖住。
解决办法：给父层的div指定z-index

解决后的代码：
<style>
        #div1{position:relative; background:#FF0000; width:200px; height:100px; zoom:1; z-index:3;}
        #div2{position:absolute; background:#FFFF00; width:49px; height:50px; left:176px; top:110px; z-index:99;}
        #div3{position:relative; background:#000000; width:200px; height:100px; z-index:2;}
        #div4{position:relative; background:#9900FF; width:200px; height:100px; z-index:1;}
</style>

<div id="div1">
   <div id="div2"></div>
</div>
<div id="div3"></div>
<div id="div4"></div>

在IE6下的效果如下：