Confused about css z-index

Question

I have two layers, 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 a text container:

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

I want the overlay and container to display at the same time:

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

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

Demo here

Finally, I found that I had to set the z-index overlay to -1 , it would work.

Why can't I set the z-index overlay above because its position is fixed?

Answer 1

z-index does not apply to #wrap because it has stream positioning. The box must have at least position: relative; before the entry into force of z-index .

Also, your z-index missing a 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; } 

Answer 2

The element with static positioning (this is the default value) does not depend on the z-index property, change its positioning to relative