Conflicting Z-Index in IE6

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

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.

Reblog this post [with Zemanta]

27 thoughts on “Conflicting Z-Index in IE6”

  1. 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. 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…

  3. 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!!

  4. 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..

  5. 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.

  6. 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

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. the z-index: -1 ALMOST solves all my problems. on all my blog pages it helps the menu appear over everything. but i have an on the home page that won’t play nice and the drop-down is covered by that. grrr. attempting the zoom technique, but i am not sure what I am supposed to apply the zoon to.

  13. Kathy: Applying zoom:1 to an object triggers haslayout in Internet Explorer. Try adding it to items that are not behaving as expected in IE6. It’s not a cure for everything, but is worth testing.

  14. I’ve corrected this by forcing the bug onto the elements that aren’t positioned by adding position:relative; to the other elements in the DOM which aren’t being re-indexed.

Leave a Reply

Your email address will not be published. Required fields are marked *