IE Cracked: Z-Index

Seeing as I just ran into this problem myself when building a site for a client, I figure that Z-Index is a good place to start. I assume that if you are experiencing this issue that you know enough about z-index to use it in your site, in case you do not (which may be some of the issue), z-index is the stacking order of elements on top of each other or the arrangement along the z-axis (as seen in the illustration above).

When people run into trouble here is usually with advanced CSS elements like drop-down navigation or other forms of absolute positioning (eg. when a child element is visually overlaps a child element of it’s parent’s sibling element using z-index–a cousin element if you will, like say your mom’s brother’s son).

So lets take the following example (much like the above mentioned):

<div id=”HeaderWrapper”>
  <div id=”HeaderChild”>
    This is a large overlapping element
  </div>
</div>

<div id=”ContentWrapper">
  <div id=”Content Child”>
    This is another element that is supposed to be BEHIND the HeaderChild Element...
  </div>
</div>

The Styles for this would look a something like this:

# HeaderWrapper, #ContentWrapper{
  width:500px;
  height: 500px;
  position: relative;
  background-color: #ddd;
  border: 1px solid black;
}
# HeaderWrapper # HeaderChild{
  width: 300px;
  height: 100px;
  position: absolute;
  bottom: -50px;
  left: 0;
  z-index: 5;
  background-color: red;
}
# ContentWrapper # ContentChild{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #2F7373;
}

Thus in theory, we want the HeaderChild element to visually be placed on the upper left corner of the ContentChild element. While most browsers are smart enough to see the difference in Z-index here, and thus display the elements as we have intended, IE6, the cursed browser, is not smart enough.

So what can we do? Well IE does not recognize the child element’s z-index over it’s parent. Thus what you need to do is stack the parent elements which hold the overlapping children such that the two elements with competing z-indexes are siblings.

Thus in the CSS we would need to change it so that it looks like this:

# HeaderWrapper, #ContentWrapper{
  width:500px;
  height: 500px;
  position: relative;
  background-color: #ddd;
  border: 1px solid black;
}
# HeaderWrapper{
  z-index: 5;
}
#ContentWrapper{
  z-index: 1;
}
# HeaderWrapper # HeaderChild{
  width: 300px;
  height: 100px;
  position: absolute;
  bottom: -50px;
  left: 0;
  background-color: red;
}
# ContentWrapper # ContentChild{
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #2F7373;
}

Once you correct that code, you should be good to go! Please keep in mind here that it was alright for me to remove the z-index from my Child elements because they have no siblings that are being effected by the z-index. Should your design not be the same, you may need to also leave in your z-index, it will still work the same!

Good luck and happy coding :-)

Tags: CSS, HTML, Tricks of the Trade, Tutorials, Web Dev, Web Development

This entry was posted on Saturday, September 11th, 2010 at 8:48 pm and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.