Position relative + z-index = IE Bug

The problem

If you’re dealing with absolutely or relatively positioned elements and you’re noticing that the z-index property doesn’t seem to work, you may be encountering yet another IE bug. In certain cases, IE 6 especially will ignore the z-index property of elements whose parents don’t have a z-index.

The Solution

The credit goes to Nathan Ostgard for his Position Relative, z-index IE Bug fix. Just give your container, or parent element a z-index of any number. We added:

z-index:1

Tags: ie bug, Internet Explorer

This entry was posted on Friday, April 10th, 2009 at 3:57 pm and is filed under CSS, JavaScript/DOM. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Position relative + z-index = IE Bug”

Bart Lagerweij says:

July 30, 2009 at 4:01 am

Thanks, solved my IE6 problem!
@ Zele says:

July 30, 2009 at 7:21 am

Thank you for sharing this with us. I noticed IE 8 will render absolutely positioned elements on top of relatively positioned ones, regardless of the z-index you provide.

Knowing this, I just added a z-index to the (absolutely positioned) container, which prooved enough to bring the (relatively positioned) child element on top.

This saved me a lot of work. Good one!

breakthrough design