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.


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
lol! nice to see that I am indirectly saving clients from the wrath of frustrated web developers.
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.
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).
Thanks for the investigative work. I’m being bit by this.
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.
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).
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.
Micheal,
This seem to work.
thanks much!!!
Michael,
This seem to work.
thanks much!!!
Michael, thank You for the exellent tip =)
Thx 4 the tip. I hate IE but my page has to work with this ‘browser’.
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.
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!
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
eh, ignore that fix. the code didn’t come across anyhow!
Go an easier workaround:
z-index: 0 !important; z-index: -1;
Et Voila!