CSS Z-index Not Working to Order Depth Position of DIVWednesday, 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>
Here's a full explanation: