« Microsoft Downgrading E-mail Support for CSS | Main | Free Keyword Suggestion Tool »
Correctly Setting Z-index
February 1st, 2007 by Jonathan Kemp
One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.
I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.
Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.
Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.
Posted in CSS, Tips | Leave a Comment
