css - z-index 问题 IE 7

Question

我有两个div。

第一个覆盖整个屏幕并具有透明背景

另一个 div 具有白色背景和比第一个 div 更高的 z-index。但是透明背景用白色背景覆盖了第二个 div……我该怎么做才能解决这个问题？

.lightbox{
        top: 0;
        left: 0;
        background: #000;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1000;
        filter:alpha(opacity=50);
        opacity:0.5;
}

#lightboxContent{
        display: none;
        width: 325px;
        height: 260px;
        background: #FFF;
        position: absolute;
        z-index: 2000;
        top:0;
        border:3px solid #CCC;
        text-align:center;
}

Answer 1

http://jsfiddle.net/DHYFz/

这对我使用IE7+您的设置非常有效。代码的其他部分中可能存在重叠元素？

可能的问题：如果您要嵌套 lightboxContent 元素，请记住父 z-index 将胜过子元素。

简单的解决方法是，不要嵌套 lightbox > lightboxContent。无论如何都取容器的全宽和全高。

Answer 2

一个简单的方法是通过将 IE7 放在 html 的顶部来停止。