【转】关于IE7 z-index问题完美解决方案

来源：http://jacobcookie.iteye.com/blog/1876426

浏览器兼容性问题太让人蛋疼了，今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决，毕竟要从用户的角度着想。百度了好多还是无法解决，最后google了一下，找到了方法。

直接上例子：

Html代码代码：

    <div id="container">  
        <div id="box1">This box should be on top</div>  
    </div>  
    <div id="box2">  
       This box should not be on top;   
       IE however seems to create a new stacking context for positioned elements,  
       even when the computed z-index of that element is 'auto'.  
     </div>

Css代码代码：

    body { margin: 0; padding: 0; }  
    #container { position: relative;}  
    #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }  
    #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

效果:……（就是没有实现z-index所指的效果呵呵）

这是为什么呢？其实这是IE浏览器的一个BUG——在IE浏览器中，定位元素会产生一个新的stacking context，并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。

在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。

修改后的css代码代码：

    body { margin: 0; padding: 0; }  
    #container { position: relative; z-index:30;}  
    #box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }  
    //box1有没有z-index都无所谓了，但必须同position（relative或absolute）使用,就跟一个人  
    //生不了孩子一样，需要配合。  
    #box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

效果:……（就是实现了z-index属性所指的效果了呵呵）

要想覆盖住父级的同级，父级的z-index就必须别的大，这就跟拼老爸一样，老爸强你就强，这就是传说中的哲学啊。

=================================================================

下面来自：http://blog.sina.com.cn/s/blog_77187555010133cv.html

=================================================================

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

因为其实是IE7的渲染DOM的问题，当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。

解决办法：在父容器中加上z-index值就可以了。z-index属性必须与position配合用，否则不会生效的。

================================================================

下面来自：http://zhidao.baidu.com/link?url=x0uD04htpjH7JnMVukwHI4cI-9X-2GkEqHKWb0z9y-OTHTujieKO5cI2tbLm0hxQSHgl-LekmaUz6POdT-k3C_

================================================================

E6和IE7有一个bug，如果只是对一个子元素设定z-index，这个值再高，也不能覆盖与父元素同级的其他元素。所以现在通用的解决方法是对子元素的父元素也定义一个z-index的值。例如这样
<body>
    <div class="container">
        <div class="test"></div>        
    </div>

</body>

假如你已经定义了 .test {position:absolute; z-index:9999;}，如果要让这个样式在IE6、IE7下面生效的话，就还要在container的div里面加一句：
.container {z-index:100;}
如果container还有一个父元素，就要在那个父元素上也定义一个z-index的值才行。。。