Conflicting Z-Index in IE6
23 Comments Published 4 years ago in :absolute, :relative, Browsers, CSS, CSS2, Hacks, IE7, JavaScript, Z-Index and position Digg ThisInternet Explorer 6 has an issue with positioned elements that use z-index. Here’s the trouble I just had with this:
I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…
However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.
PPK summarized this problem on his post: Explorer z-index bug:
It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.
This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK
While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..
Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.
IE7 and more fun
According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke
More solutions
Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.
Yet another hack/update
I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6
Yet another hack/update 4-30-06
We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.
Related articles by Zemanta
- Microsoft to issue emergency patch for Explorer security hole
- Dump Internet Explorer. You are Vulnerable.
- Tech Note: IE6 Needs an Exorcism
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=32bfa3b5-b81d-44f8-9248-aa2dbb0bcea7)
23 Responses to “Conflicting Z-Index in IE6”
- 1 Pingback on Dec 25th, 2007 at 5:47 am
- 2 Pingback on Sep 1st, 2008 at 7:32 pm
- 3 Pingback on Jul 9th, 2009 at 12:56 am
Did I just say it was simple to fix?
After working with this some more, I’ve come across some serious issues. I’ve got several pages with spans that are positioned over relative parents below the dropdown list. These are over-powering the dropdown list. And… the big killer… form elements, good luck getting those to sit under the z-indexed element in IE6.
Feel free to share this
Hi,
I’m having my own z-index nightmare right now whilst redoing my website. Got it working great in Firefox but unless I can fix the z-index problem in IE6 & 7 will have a load more work to do. One thing I noticed in your post was that you said the links no longer worked with a neg z-index.
I had the same problem in Firefox, and I could be wrong, but doesn’t the document window have a default value of 0? So whilst still visible they won’t be clickable as they’re below the window itself…?? Or am I misunderstanding something, can’t see your working example…
forget my last comment!
Thanks!
The z-index: -1 hack really works!! On my page, the menu-box (appears when hovered) should be on top of the page contents, but it didn’t. The box had a z-index of 100 and the content, 0. (Not relying on the default, I declared that myself). On every other browser I know, it worked.
Now, after a lot of headaches, I found this page and declared the content’s z-index to -1. It worked, so thanks a lot!!
In my jsp page i have a list of fields consisting of text boxes and ,combo boxes.In this list of fields i have the fields placed in such a way that combo box follows the text box ,which is a auto complete field.The problem here is that as the text box is a auto complete field the moment i enter some letter it overlaps with the combo box.would be very glad to recive any help pls….
thank you..
Thanks a lot, it’s crazy, but this z-index:-1; trick saved my work.
I also had this problem. I fixed it by changing the z-index to be around the parent element. It does not like it if it is around a child element.
Hello,
I just want to thank you for writing about this. I actually tried out Aleksandar’s approach yesterday, but I probably did something wrong or was to nervous to think properly
Anyway, thank you for appearing first on my google search!
Best,
Dan
Thank you, thank you, for this help. I’ve been working for three days to fix two elements (one on top of the other), scouring the Internet, and the zindex -1 fix worked! Thanks for all your contributions.
Thanks! The z-index:1 for the parent element worked (luckily the parent was #pagewrapper, so it didn’t affect anything else…yet…
Beautiful! Z-index:-1 saved my day. Thanks a lot.
I was having this z-index issue as well, but I have two menus with drop down lists, one that drops down on the other. similar to the nav menu on http://nymag.com/
If I set the secondary menu to z-index: -1 then the links didn’t work anymore. I decided to use jquery to change the z-index of the second level menu as needed:
$(’ul#primary-menu > li’).hover(
function(){
$(’#secondary-menu’).css(”zIndex”,”-1″);
},
function(){
$(’#secondary-menu’).css(”zIndex”,”5″);
}
);
hope that helps someone.
We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe “shield” technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn’t really all that much) so that I don’t have to go crazy about IE6 bleedthru is worth it.
negative index -1 also saved my ass! thanks dude.
Thank you so much – IE6 is driving me bonkers and this tip really helped me!
Just put “zoom: 1″ on the element giving you the problem, IE6 will draw it on top when you do that. It’s not valid CSS but it’s some crazy shit that IE6 does and it fixes it’s own stupid little problem. This is by far the easiest fix.
zoom:1 is actually a normal css rule that defines the magnification of the page at 100%. No browser really recognizes it, but it invokes haslayout and Microsoft recommends it as a safe method.
I am having an issue with z-index in IE 6 using MSFT filters for transparent PNGs. I know this is a whole crazy world of inconsistencies and hokey crap but I was wondering if you have any info on how filter effects z-indexing in IE 6 or if it effects any of the hasLayout stuff.
Thanks for sharing! This saved me a whole lot of headaches!