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.
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 =)
Pingback: MahZeh.org » Blog Archive » Solutions to the IE z-index Bug: CSS
Thx 4 the tip. I hate IE but my page has to work with this ‘browser’.
Pingback: sunhwan » IE z-index Bug
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!
Pingback: Superfish jQuery Menu IE z-index Bug | webdemar.com
Pingback: Problema con bug de z-index en ie | Santa Pola
Pingback: IE z-index bug with CSS dropdown menu | jonathan stegall
Pingback: IE6 CSS bug: dropdown menu, z-index e elementi dei form. at My Notepad
Pingback: Z-Index Issues in Internet Exploder « Vir2oso Design