CODEWITHSUNDEEP
cssz-index
JCOC611
JCOC611

Reputation: 19759

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:

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

Upvotes: 3

Views: 1333

Answers (3)

Vinnyq12
Vinnyq12

Reputation: 1559

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

Upvotes: 0

arnorhs
arnorhs

Reputation: 10429

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

Upvotes: 0

Ben Blank
Ben Blank

Reputation: 56634

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. ;-)

Upvotes: 3

Related Questions