IE7 zindex失效

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;100px;height:100px;background:red;z-index:100;"></div> 
</div> 

<div style="position:absolute;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;100px;height:100px;background:red;"></div> 
</div> 

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

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