IE z-index bug
by kae verens on Jul.15, 2005, under web development
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.
17 Comments for this entry
7 Trackbacks / Pingbacks for this entry
-
MahZeh.org » Blog Archive » Solutions to the IE z-index Bug: CSS
April 9th, 2007 on 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(); } } [...]
-
-
Superfish jQuery Menu IE z-index Bug | webdemar.com
November 6th, 2008 on 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. [...]
-
Problema con bug de z-index en ie | Santa Pola
November 11th, 2008 on 12:25 am[...] de buscar un poco, encontré con klog y pude dar con ello. Os pongo el ejemplo que pone [...]
-
IE z-index bug with CSS dropdown menu | jonathan stegall
January 16th, 2009 on 12:55 am[...] web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix [...]
-
IE6 CSS bug: dropdown menu, z-index e elementi dei form. at My Notepad
April 28th, 2009 on 9:39 pm[...] Non contenti del fatto che IE6 sia la principale causa di dropdown menu costretti a far uso di javascript (oltre che di mal di testa da programmazione), gli sviluppatori di Redmond hanno pensato bene di introdurre un altro bug nell’interpretazione CSS, che riguarda l’elemento select (che non supporta z-index, ecco un workaround) e anche lo z-index di elementi che abbiano position:relative. [...]
-
Z-Index Issues in Internet Exploder « Vir2oso Design
March 5th, 2010 on 2:53 am[...] I am currently redesigning my employer’s web site. I use Dreamweaver so creating drop-down menus is a snap using Spry. After previewing the index page in the browser I noticed a familiar problem. The index page has a flash animation as it’s main content and the items from the drop-down menu were appearing behind the flash window. Simple fix as I had been through this before. Just change the wmode parameter of the flash file to transparent and pat myself on the back for a job well done. Well, it didn’t work. The first day and a half was spent trying to figure out why changing the wmode worked on another site I had built in the past but not this one. I was about to pull my hair out, such as it is, when I realized that the menu was not just appearing behind the flash animation but any content in the div below it. That’s when it hit me that it was a z-index issue. Once again, simple fix. Just assign the div containing the navigation a higher z-index than the div that appears below it. Didn’t work. The second day and a half was spent searching for a solution and then blindly applying position and z-index attributes to various divs in the header element and the content element. I was about to pull my hair out (such as it is) when I stumbled upon the answer found at http://verens.com/archives/2005/07/15/ie-z-index-bug. [...]
February 27th, 2006 on 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 on 1:59 pm
lol! nice to see that I am indirectly saving clients from the wrath of frustrated web developers.
March 22nd, 2006 on 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 on 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 on 8:37 pm
Thanks for the investigative work. I’m being bit by this.
May 12th, 2006 on 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 on 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 on 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 on 9:05 am
Micheal,
This seem to work.
thanks much!!!
May 29th, 2006 on 9:06 am
Michael,
This seem to work.
thanks much!!!
January 6th, 2007 on 10:45 pm
Michael, thank You for the exellent tip =)
July 14th, 2007 on 9:24 pm
Thx 4 the tip. I hate IE but my page has to work with this ‘browser’.
August 3rd, 2007 on 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 on 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 on 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 on 8:19 am
eh, ignore that fix. the code didn’t come across anyhow!
January 18th, 2008 on 11:37 am
Go an easier workaround:
z-index: 0 !important; z-index: -1;
Et Voila!