IE7 z-index失效

BUG:z-index 有时候设置了很高的值如:z-index:999; 但是最后在IE7中却达不到我们想要的效果,设置了z-index还是被遮盖了。

原因:因为其实是IE7的渲染DOM的问题,当它的父级容器被定位(显示设置了position属性, 如position:relative)的时候,子元素的z-index属性会被重置(我测试的结果显示z-index等于0)。
 
解决办法:在设置了position属性的父容器中加上z-index值就可以了。z-index属性必须与position配合用,否则不会生效的(PS:父容器没有position属性也不会出现这个BUG)。
 
代码如下:
父级元素设置了定位属性position;
<div style="position:relative;"> 
    <div style="position:absolute;width:100px;height:100px;background:red;z-index:100;"></div> 
</div> 

<div style="position:absolute;width:100px;height:50px;background:black;z-index:10;"></div> 

  IE7显示如下:      标准浏览器显示:

给父级定位元素设置z-index;

<div style="position:relative;z-index:100;"> 
    <div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div> 
</div> 

<div style="position:absolute;z-index:10;width:100px;height:50px;background:black;"></div> 

  IE7显示如下:      标准浏览器显示:

 
posted @ 2013-12-05 15:00  过眼云烟之活在当下  阅读(145)  评论(0编辑  收藏  举报