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!

16 replies
  1. Lasitha
    Lasitha says:

    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. Lasitha
    Lasitha says:

    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. Liran Cohen
    Liran Cohen says:

    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. Liran Cohen
    Liran Cohen says:

    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. My solution
    My solution says:

    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. My solution
    My solution says:

    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. Fredrik
    Fredrik says:

    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. Fredrik
    Fredrik says:

    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.

Trackbacks & Pingbacks

Comments are closed.