Conflicting Z-Index in IE6 at Advanced CSS Design Resources

Conflicting Z-Index in IE6

Published 2 years, 8 months ago in :absolute, :relative, Browsers, CSS, CSS2, Hacks, IE7, JavaScript, Z-Index and position Digg This

Internet 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

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.

15 Responses to “Conflicting Z-Index in IE6”

Feed for this Entry Trackback Address

1 ted Mar 13th, 2006 at 7:59 pm

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.
2 Hedger Mar 14th, 2006 at 11:17 am

Feel free to share this
3 Frances Lewis May 2nd, 2007 at 6:38 am

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…
4 Fran May 2nd, 2007 at 7:15 am

forget my last comment!
5 Rafael Lerm May 3rd, 2007 at 4:20 pm

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!!
6 abc Oct 18th, 2007 at 6:10 am

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..
7 Laurent Nov 21st, 2007 at 2:05 am

Thanks a lot, it’s crazy, but this z-index:-1; trick saved my work.
8 Zach Inglis Jul 15th, 2008 at 5:55 am

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.
9 Daniel Jankovic Jul 17th, 2008 at 4:26 am

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
10 Michelle Aug 26th, 2008 at 9:17 am

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.
11 Dwayne Sep 2nd, 2008 at 5:47 am

Thanks! The z-index:1 for the parent element worked (luckily the parent was #pagewrapper, so it didn’t affect anything else…yet…
12 ljagy Sep 25th, 2008 at 5:53 am

Beautiful! Z-index:-1 saved my day. Thanks a lot.
13 Andrew Mellenger Oct 5th, 2008 at 7:33 pm

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.