A depth (z-index) nightmare

The best way to illustrate this question is with...a Fiddle! Before you visit the fiddle, notice there is text behind the grayest element, which is on top of a light gray element that has a border.

There is a main wrapping div (root), and two wrapping divs inside (wrap1 and wrap2). The problem here is that I need the content of wrap2 (highlight) to be behind the content of wrap1 (text), but in front of the background of the root.

This, however, must not change:

• The HTML, the elements and wraps should be left untouched. Excluding the order of wrap1 and wrap2 inside root.

• The highlight div mus开发者_高级运维t keep the absolute positioning.

• Styling highlight with background-color is not an option, the existence of highlight is a must.

PS: the italics reference the id's of <div>s in the fiddle example, for whomever was too lazy to visit it.

I was able to display the text in front of the highlight by adding a z-index to text. (Adding the z-index to wrap1 also works.) The trick is to remember that z-index doesn't apply to statically-positioned elements, so you need to give the same div position: relative.

#text {
    position: relative;
    z-index: 1000;
}

(Large z-index because I've been bitten by IE not respecting low values in the past. May or may not still be an issue. ;-)

z-index can be difficult to grasp. I think somebody already answered your question, but if you want to learn more how they work, this is a pretty comprehensive guide:

http://www.onextrapixel.com/2009/05/29/an-indepth-coverage-on-css-layers-z-index-relative-and-absolute-positioning/

And also, here is a link where you can try out different z-index and how they are affected by different position properties (the main reason for difficulty)

http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

#wrap1{position:absolute;z-index:2;}