CODEWITHSUNDEEP
cssz-indexcss-position
hh54188
hh54188

Reputation: 15656

Confuse about css z-index

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?

Upvotes: 4

Views: 123

Answers (2)

Musa
Musa

Reputation: 97727

An element with static positioning(this is the default) is unaffected by the z-index property, change its positioning to relative

Upvotes: 0

Dai
Dai

Reputation: 155708

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; }

Upvotes: 2

Related Questions