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.
Entries (RSS)
February 27th, 2006 at 12:46 pm
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
February 27th, 2006 at 1:59 pm
lol! nice to see that I am indirectly saving clients from the wrath of frustrated web developers.
March 22nd, 2006 at 2:59 pm
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.
March 22nd, 2006 at 3:05 pm
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).
April 14th, 2006 at 8:37 pm
Thanks for the investigative work. I’m being bit by this.
May 12th, 2006 at 11:26 am
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.
May 12th, 2006 at 7:47 pm
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).
May 18th, 2006 at 1:43 pm
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.
May 29th, 2006 at 9:05 am
Micheal,
This seem to work.
thanks much!!!
May 29th, 2006 at 9:06 am
Michael,
This seem to work.
thanks much!!!
January 6th, 2007 at 10:45 pm
Michael, thank You for the exellent tip =)
April 9th, 2007 at 3:29 am
[...] The z-index style rule — seemingly simple at first, suprisingly complicated when you think it through — is an oft-misunderstood part of the CSS2 specification. Among those who misunderstand, evidently, are members of the Internet Explorer team at Microsoft. Others before me have documented the IE z-index bug (Anne van Kesteren and Kae Verens among them), but I find it easier to grasp with a live example: function zindex(id, z_index) { var old_link = $(id + “_” + $(id).getStyle(”z-index”)); if (undefined != old_link) { old_link.setStyle({background: “none”}); } if (0==z_index) { $(id).setStyle({”z-index”: null}); $(id + “_” + z_index).blur(); } else { $(id).setStyle({”z-index”: z_index}); $(id + “_” + z_index).setStyle({background: “#ea7″}).blur(); } } [...]
July 14th, 2007 at 9:24 pm
Thx 4 the tip. I hate IE but my page has to work with this ‘browser’.
July 27th, 2007 at 5:30 pm
[...] IE z-index Bug [...]
August 3rd, 2007 at 2:24 am
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.
January 3rd, 2008 at 4:42 pm
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”.
Thanks!
January 12th, 2008 at 8:11 am
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
E
January 12th, 2008 at 8:19 am
eh, ignore that fix. the code didn’t come across anyhow!
January 18th, 2008 at 11:37 am
Go an easier workaround:
z-index: 0 !important; z-index: -1;
Et Voila!
November 6th, 2008 at 4:17 pm
[...] Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100. After a bit of research I came accross the IE z-index Bug on Klog - php, linux, ajax, javascript. [...]
November 11th, 2008 at 12:25 am
[...] de buscar un poco, encontré con klog y pude dar con ello. Os pongo el ejemplo que pone [...]