z-index issue IE 7

Question

I have two divs.

The first one covers the whole screen and with a transparent background

the other div has a white background and a higher z-index then the first div. But the transparent background covers the second div with the white backgorund...what can I do to fix this?

.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/

This works perfectly fine for me using IE7+ with your setup. Possible overlapping elements in some other portion of your code?

Possible problem: if you were to, let's say, nest the lightboxContent element, keep in mind that the parent z-index will trump the child.

Easy fix is, not to nest lightbox > lightboxContent. Takes full width and height of container regardless.

Answer 2

An easy way to do it is stop IE7 by putting at the top of your html.