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: ,

This entry was posted on Friday, April 10th, 2009 at 3:57 pmand 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.

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

  • Bart Lagerweij Says:
    July 30th, 2009 at 4:01 am

    Thanks, solved my IE6 problem!

  • @ Zele Says:
    July 30th, 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!

  • Al Stevens Says:
    June 2nd, 2010 at 8:28 am

    Thanks for sharing this and giving me the afternoon off. Sweet :)

  • C#Guy Says:
    June 7th, 2010 at 7:50 am

    Epic! :)

    Solved my z-index, menu disappear bugg right away.

  • phale Says:
    June 10th, 2010 at 10:29 pm

    Thanks

    But if my control is in orther control, I have to set the z-index of the top parent

Leave a Reply