CSS: Z-Index and Internet Explorer



If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.

The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!

Thanks for wasting several hours of mine IE.

See here and here for others with this problem!

  • Ken

    Thanks man! Just ran into this a couple of days ago and couldn’t figure it out.

  • Ken

    Thanks man! Just ran into this a couple of days ago and couldn’t figure it out.

  • Mattapus

    Ah man, you’re a lifesaver! Thanks for the tip!

  • Mattapus

    Ah man, you’re a lifesaver! Thanks for the tip!

  • Lasitha

    OH thx buddy… it working…
    u r great. no words to express ma feelings.
    thanx buddy.
    keep it up. u guys help alot… max…

  • Lasitha

    OH thx buddy… it working…
    u r great. no words to express ma feelings.
    thanx buddy.
    keep it up. u guys help alot… max…

  • Liran Cohen

    AHHHHHHHHHH

    I cant believe those ****** MS!!!
    I just cant believe the time I wasted on this issue!!! and the money I lost due to this ****** bug!!! if its thats common why dont they fix it?!?!?!?

    Thanks man , you just helped me finish the week at ease :)

  • Liran Cohen

    AHHHHHHHHHH

    I cant believe those ****** MS!!!
    I just cant believe the time I wasted on this issue!!! and the money I lost due to this ****** bug!!! if its thats common why dont they fix it?!?!?!?

    Thanks man , you just helped me finish the week at ease :)

  • Jonathan

    Thanks, you saved me a lot of time :D

  • Jonathan

    Thanks, you saved me a lot of time :D

  • My solution

    I’ve been making a pop-up box sytem for positioned boxes (rendering a map). Your fix didn’t work for my (actually I’d already added a relative position).

    However, by looking at the links you provided I found out that an element “A1” with ie. z-index 3 will go below an element “B1” with z-index 2 if it’s inside an element “A2” with z-index lower than 2.

    I fixed my problem by setting a class for A2 and making a style for this class which made the z-index value high while hovering A2.

  • My solution

    I’ve been making a pop-up box sytem for positioned boxes (rendering a map). Your fix didn’t work for my (actually I’d already added a relative position).

    However, by looking at the links you provided I found out that an element “A1” with ie. z-index 3 will go below an element “B1” with z-index 2 if it’s inside an element “A2” with z-index lower than 2.

    I fixed my problem by setting a class for A2 and making a style for this class which made the z-index value high while hovering A2.

  • Fredrik

    Thank you My solution!

    I had a div with position absolute and a high z-index, placed in a div with relative position and no z-index and the absolutely positioned one ended up under lots of other elements with no z-index.

    By just adding z-index 1 to my relative div it solved the problem.

  • Fredrik

    Thank you My solution!

    I had a div with position absolute and a high z-index, placed in a div with relative position and no z-index and the absolutely positioned one ended up under lots of other elements with no z-index.

    By just adding z-index 1 to my relative div it solved the problem.

  • Pingback: ahujaankit()

  • Pingback: Syd()