Nightmare of Depth (z-index)

Question

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

There is a main wrapping div (root) and two div wraps inside (wrap1 and wrap2). The problem here is that I need the contents of wrap2 (selection) to be behind the contents of wrap1 (text), but before the root.

This, however, should not be changed:

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

• The div selection must contain absolute positioning.

• Highlighting a style with is background-colornot an option; having a highlight is a must.

PS: italics refer to id <div>using an example script for whom it was too lazy to visit it.

Answer 1

I was able to display the text before highlighting add z-indexto the text . (An addition is also added z-indexto wrap1). The trick is to remember that it z-indexdoes not apply to statically positioned elements, so you need to give the same div position: relative.

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

(Great z-indexbecause I was bitten by IE, not respecting low values ​​in the past. May or may not be a problem .;-)

Answer 2

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

Answer 3

z-index . , - , , , :

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 another z-index and how different position properties influence them (the main reason for complexity)

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