IE z-index bug

I was helping hostyle out with a puzzling z-index problem. An element he had given a z-index:100 was appearing below another element of z-index:0.

Finally, we managed to find the problem. It appears that if you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other.

Here is an example of the bug. Note that Firefox displays it correctly, while IE does not.

Firefox screenshot IE screenshot

To solve it, try to keep the layered elements within the same position:relative context. Other than that, I’m not sure of a workaround.

24 Thoughts on “IE z-index bug

  1. 3 dayzz of climbing up the wall and it may have been 3 months without the above tip. Client now removed from ceiling and nail marks plastered over. Fellow seekers will be pointed this way
    Many Many Thanks

  2. lol! nice to see that I am indirectly saving clients from the wrath of frustrated web developers.

  3. Why is it a problem to be 30? That sort of crap has resulted in IT professionals increasingly being unemployable well before middle age. What you sow you will reap.

  4. what? I think you misread my quote. I did not say that 30 was the age at which web developers suddenly forget how to code. It was merely a humourous reminder to myself that I am getting “old” (whatever that means, these days).

  5. Thanks for the investigative work. I’m being bit by this.

  6. Ruud on May 12, 2006 at 11:26 am said:

    Another workaround might be to set the z-index of all relative elements dynamicly when building the page. First element gets z-index 10000 or so, second gets 9990 and so on. A bit of a dirty trick, but if this can be achieved server side, at least you wont bother the client with it.

  7. That’s an interesting idea, Ruud – must try that out. If it works, I’ll suggest it for the IE7 script project (all IE bug workarounds should probably be pointed out there).

  8. Michael on May 18, 2006 at 1:43 pm said:

    You should set the z-index on the position:relative elements (and not on the absolute elements within it if you have any).

    Also note that when setting the z-index for a positioned element, a new z-order stack will be created for the child elements.

  9. Y-coci on May 29, 2006 at 9:05 am said:


    This seem to work.

    thanks much!!!

  10. Y-coci on May 29, 2006 at 9:06 am said:


    This seem to work.

    thanks much!!!

  11. Michael, thank You for the exellent tip =)

  12. Pingback: » Blog Archive » Solutions to the IE z-index Bug: CSS

  13. tomchito on July 14, 2007 at 9:24 pm said:

    Thx 4 the tip. I hate IE but my page has to work with this ‘browser’.

  14. Pingback: sunhwan » IE z-index Bug

  15. Rengirl on August 3, 2007 at 2:24 am said:

    THANK YOU THANK YOU THANK YOU! I was splitting hairs over this stupid IE css error and I was about to give up until I found this. Problem solved.

  16. Jens Brandt on January 3, 2008 at 4:42 pm said:

    Let me join the choir of thankful people: I’ve been looking around the web, but this sentence explained it all: “It appears that if you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other”.

  17. thanks for this info — my easy workaround was to just wrap my elements in another div, positioned absolutely… i.e.

    <- this is to fix bug

    etc etc

    <– close ie7 fix div

    thx thx

  18. eh, ignore that fix. the code didn’t come across anyhow!

  19. BugRocker on January 18, 2008 at 11:37 am said:

    Go an easier workaround:

    z-index: 0 !important; z-index: -1;

    Et Voila!

  20. Pingback: Superfish jQuery Menu IE z-index Bug |

  21. Pingback: Problema con bug de z-index en ie | Santa Pola

  22. Pingback: IE z-index bug with CSS dropdown menu | jonathan stegall

  23. Pingback: IE6 CSS bug: dropdown menu, z-index e elementi dei form. at My Notepad

  24. Pingback: Z-Index Issues in Internet Exploder « Vir2oso Design

Post Navigation

%d bloggers like this: