IE兼容-z-index

    今天在做页面的时候,发现要显示的元素在ie6,7中一直位于其他元素的下面(图片元素特别明显),该元素已经设置position:absolute;z-index:9999;其父元素也设置了position:relative;z-index:9998;

显示效果如下左。

    后经学习发现ie6,ie7有同样的bug,虽然父级元素设置了z-index属性,但父级的父级元素未设置z-index;当将父级的父级元素的z-index设置为1后,显示正常了。效果如下右。


         IE兼容-z-index          IE兼容-z-index

 

父级关系代码示例如下:

<div style="position:relative; z-index:1;">
   <div style="position:relative; z-index:1000;">       
      <div style="position:absolute; z-index:9999;"><img src="img1.jpg" /></div>   
   </div>
</div>

你可能感兴趣的:(z-index)