Question

We are trying to create an “edit in place” kind of form. I’m using jQuery to add an overlay div to the page and the z-index is set to 1000. I have 4 Divs on the page that have a z-index set higher than that but they are not displaying over the overlay. Eventually I’ll code the divs to be hidden until the edit button is clicked for one but for now they are all displayed.

I’m trying to avoid using a modal script because we want these divs to display in place, not in the center of the window.

Here is a jsfiddle example:

http://jsfiddle.net/richcoy/28n5J/

Answer 1

z-index only works on positioned elements. That means, you have to set a position other than default static, so one of the following:

• relative (recommended if you want it to stay in place)
• absolute
• fixed

Good reads:

• The Z-Index CSS Property: A Comprehensive Look ^{SmashingMagazine}

• Understandind CSS z-index ^MDN