Question

I have two layer,one is black overlay:

#overlay {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    display: none;
} 

the other is my text container:

#wrap {
    z-index: 999
    width:600px;
    height:600px;
    border:5px solid black;
    display:none;
    color:red;
}

I want let the overlay and the container show at the same time:

$(document).click(function () {
    $('#overlay').add('#wrap').fadeIn();
})​​

but the text container is always under the overlay,although I have set the overlay z-index to 0 and set the container z-index to 999.

Demo is here

finally I found I have to set the overlay z-index to -1, it would work.

Why I can not set the overlay’s z-index more higher?Because its position is fixed?

Answer 1

z-index is not applied to #wrap because it has flow positioning. A box must have at least position: relative; before z-index takes effect.

Also, your z-index value is missing its semicolon. Make it z-index: 999; and it works. My code is below:

#wrap {
    z-index: 999;
    width:600px;
    height:600px;
    border:5px solid black;
    background: #FFF;
    display:none;
    color:red;
    position: relative; }