Blog

CSS Z-index Not Working to Order Depth Position of DIV

Wednesday, August 24, 2011 by Sean P

This drove me crazy once or twice. Sometimes backgrounds and images don't play nice and overlap eachother in unintended ways.  So, you want to set the depth-order to fix this, with the z-index CSS property.

It seems simple enough.  Z-index: 10 is "behind" Z-index: 20 is "behind" Z-index: 50 and so on.  But, give it a shot and it frequently has no effect whatsoever and just seems to not work.  Well, there is just one tidbit of information missing in this equation:

To get Z-Index to work, you must have the DISPLAY property set to either:

position: relative; or position: absolute;

ex:  To ensure "div_on_top" stays in front of  "div_underneath"...

 HTML:

<div id="div_on_top">content on top...</div>
<div id="div_underneath">content underneath...</div>

CSS:

#div_on_top {

position: relative;
z-index: 20;

}

#div_underneath {

position: relative;
z-index: 1;

}


Here's a full explanation:

https://developer.mozilla.org/En/Understanding_CSS_z-index/The_stacking_context
No Posted Comments!

Post Comment

Name:*
Email Address:
Website:
Comment: *