PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Fixing IE z-index

Fixing IE z-index

This isn't an end-all-be-all solution to fixing all weird IE z-index issues, but it certainly can help in some circumstances. What it does is loop through each of the elements that you declare and apply ever-declining z-index values on them. IE gets this backwards, and this sets it correctly. The reason it's not end-all-be-all is because sometimes it's not DOM-order that you need z-index to be in, and sometimes scoping comes into play as well.

Nonetheless, the view the demo in IE 7 (thanks Dan Nicholls) to see the broken version on top and the fixed version below.

jQuery Version

$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});

MooTools Version

if(Browser.Engine.trident){
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $$('div').each(function(el,i){
               el.setStyle('z-index',zIndexNumber);
               zIndexNumber -= 10;
       });
};

Reference URL

Subscribe to The Thread

  1. DN says:

    The MooTools version has an ‘if IE’ statement, which you may not need if you put it in conditional comments. You can use jQuery to do the same thing, though conditional comments are considered more stable. You only need to target IE7 and below.

    Also, scan the CSS in the demo for some polishing of the result that jQuery gives you.

  2. Hamza Oza says:

    Kl. will come in handy.

  3. Beverly says:

    Thanks for posting this. Good stuff.

  4. J-P says:

    Nice fix for the z-index, though something goes wrong when “hiding” the additional content in IE6. It doesn’t go away, and covers the normal content until the page is refreshed.

  5. 5h4rk says:

    This works but I’m just wondering will this bring any performance issue since jQuery has to grab all the divs and assign it a z-index every time a page is loaded?

  6. Mike says:

    PrototypeJS Method:

    var zIndexNumber = 1000;
    $$("div").each(function(e) {
    e.setStyle({ zIndex: zIndexNumber });
    zIndexNumber -= 10;
    });

  7. lin04com says:

    Good job. Thanks for your share.

  8. best says:

    Fantastic.. Mootools script was the only thing that saved me!!

  9. TheNinja says:

    THANK YOU FOR THIS FIX (yes, the caps are intentional :-) ).

  10. Any luck with fixing this problem with different DOM order? Need a footer graphic to stick at the bottom of the sidebar but stay behind the widgets and overlap something else. Works everywhere I support but IE7

  11. Ami says:

    Please help… I am having problem in IE7, the drop down is hiding behind the css portfolio in the following link.

    http://www.netscribes.com/k12solutions/portfolio.html

    I need to correct it immediately. Please help.

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~