kun的记事本 - js&html&css&php

IE6、7下position和zindex的一个bug

作者：kun10 发布时间：December 27, 2010 分类：CSS

今天做demo遇到了一个很让人困扰的问题。
页面的头部有一个搜索框，里面有一个表示浮出层的div。

<div class="grandfather">
    <div class="father">
        <div class="popup">
        </div>
    </div>
    <div class="uncle">
         <div class="uncle-popup">
         </div>
    </div>
</div>

基本就是上面的类似的html结构，为了达到浮层不被别的层遮盖的目的
我设定了一下css

    .father {
                position:relative;
                z-index:4;
                width:400px;
                height:400px;
                background:#CCC;
                margin-bottom:-300px;
            }
    .popup {
                position:absolute;
                z-index:100;
                width:100px;
                height:200px;
                background:#999;
    }

可是没想到这样的样式在IE6下面居然被下面的元素给挡住了。
demo如下：地址http://lab.zipeng.info/ie6-position-zindex.html
查其原因，原来是uncle的div里面的元素也有z-index属性，虽然z-index的值比popup的值要小。但还是挡住了father里面的popup(这是关键)。

最后查阅了资料，发现ie67下面要对比两个不同级别的元素的z-index要逐级的向父元素查找。如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。所以这在IE67下面是要注意。
解决方式也很简单，给父元素加上z-index使他们具有可比性。
哎，在这个IE6走向灭亡的年代才发现这样的问题真是不应该啊~~~

标签: IE6, bug