浮动里的绝对定位元素在IE下被遮挡的解决方法

最近在优化页面时遇到的问题：在浮动里的绝对定位元素在FF下显示正常而在IE下被遮挡

 

FF显示效果：

IE显示效果：

 

    #wrap{overflow:hidden;
 height:1%;
 }	  
#wrap li{float:left;
margin-right:12px;
height:120px;
padding:6px;
position:relative;
 ist-style:none;
}		 
#wrap li .text{position:absolute;
left:120px;
top:8px;
background:#ccc;
border:1px solid #333;
width:120px;
height:30px;
z-index:9999;
} 
  

 

    <ul id="wrap">
<li style="z-index:100;">
<img src="1.jpg" />
<div class="text">固定文本内容</div>
</li>
<li>
<img src="1.jpg" />
<div class="text">固定文本内容</div>
</li>
</ul>
  

  

从表面上看是第二个浮动元素li遮住了上面的绝对定位层（即上图的文字层.text），实际上是第二个浮动元素遮住了绝对定位的的父级层（即第一个浮动层li），只要将该父级层的z-index设定大于是第二个浮动元素即可,也就是说将第一个浮动元素层li的z-index值大于是第二个浮动元素li的z-index值。

 

示例见附件

 

另外一种情况请参考：

IE6 bug: 消失的绝对定位元素 http://www.ued163.com/?p=673

 

浮动里的绝对定位元素在IE下被遮挡的解决方法