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!

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

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

  3. 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 :)

  4. 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 :)

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. Pingback: ahujaankit
  10. Pingback: Syd

Comments are closed.