今天在做页面的时候,发现要显示的元素在ie6,7中一直位于其他元素的下面(图片元素特别明显),该元素已经设置position:absolute;z-index:9999;其父元素也设置了position:relative;z-index:9998;
显示效果如下左。
后经学习发现ie6,ie7有同样的bug,虽然父级元素设置了z-index属性,但父级的父级元素未设置z-index;当将父级的父级元素的z-index设置为1后,显示正常了。效果如下右。
父级关系代码示例如下:
<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>