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"...


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


#div_on_top {

position: relative;
z-index: 20;


#div_underneath {

position: relative;
z-index: 1;


Here's a full explanation:
No Posted Comments!

Post Comment

Email Address:
Comment: *