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。无论如何都采用容器的全宽和全高。