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

       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
               zIndexNumber -= 10;


  1. User Avatar
    Permalink to comment#

    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. User Avatar
    Hamza Oza
    Permalink to comment#

    Kl. will come in handy.

  3. User Avatar
    Permalink to comment#

    Thanks for posting this. Good stuff.

  4. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    PrototypeJS Method:

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

  7. User Avatar
    Permalink to comment#

    Good job. Thanks for your share.

  8. User Avatar
    Permalink to comment#

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

  9. User Avatar
    Permalink to comment#

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

  10. User Avatar
    James Tryon
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

    I need to correct it immediately. Please help.

  12. User Avatar
    Permalink to comment#

    Thanks Buddy, You saved my day.

  13. User Avatar
    Detlev Vendt
    Permalink to comment#

    Thanks a million ! That was just the fix I urgently needed.

  14. User Avatar
    Permalink to comment#

    Hi guys,

    I need an idea about a z-index issue on IE. Here’s my html markup:

           <div style="position:relative">
                <div style="position:absolute">
                   <a style="position:absolute"> close button </a>

    The anchor (close button) is partially outside of it’s parent but it gets cut at the parent’s border. Is there a way to make the anchor look right?


  15. User Avatar
    Flavio Souza
    Permalink to comment#

    It seems to work . Thank you!

  16. User Avatar
    Permalink to comment#

    You are genius dude! Thanks a lot ! Now I can chill out and watch a movie.

  17. User Avatar
    Permalink to comment#

    I tried for a long time using just CSS to get items to get absolutely positioned items to appear over one another in a list in IE7 but gave up. Tried Chris’s jQuery code but it didn’t fix it, so I wrote this quick function below that sets the current items z-index to a high amount, while lowering the rest of the siblings. Although it works a treat, it is only an example and can definitely be improved…

    var z_index_max = 1000,
    z_index_default = 100;
    $(“ul li”).bind(“mouseover”, function(){
    }).bind(“mouseout”, function(){

  18. User Avatar
    Permalink to comment#

    This worked great!

    I had an Issue with some content disappearing, but I upped the variable zIndexNumber to 3000 and everything works great now.

  19. User Avatar
    Permalink to comment#

    This little snippet of code successfully prevented me from going insane today, trying to troubleshoot IE7 with a jQuery form validation plugin. I’m working on a very high-profile project, and the bug I was getting with jQuery-generated error message tooltips appearing beneath labels was of course not cool.

    Thank you!

  20. User Avatar
    Permalink to comment#

    question: where does Chris’ jquery snippet go in a wordpress theme? In functions.php?
    Sorry, newbie here..

  21. User Avatar
    Ahmet Ertem
    Permalink to comment#

    Thanks for trick. This hack-idea saved me

  22. User Avatar

    Just noticed the background transition on the textarea, love it!

  23. User Avatar

    Just what I needed! Thanks.

  24. User Avatar
    Permalink to comment#

    This worked great for me, where I had menu’s going behind sliders.
    Used the following code:

    var zIndexNumber = 1000;
    $(“li,ul,img,div”).each(function() {
    $(this).css(‘zIndex’, zIndexNumber);
    zIndexNumber -= 10;

  25. User Avatar
    Permalink to comment#

    Tried the jQuery version and worked. Thanks :D

  26. User Avatar
    Warren Zimmerman
    Permalink to comment#

    Thank you, tried every css trick I could think of, then BAM — jquery’d IE right in the DOM.

  27. User Avatar
    Permalink to comment#

    Awesome saved my day :)

  28. User Avatar
    Permalink to comment#

    thanks you saved my hours, I think its better to declare IE6 as a virus and allow anti-virus upgrade it or remove it.

  29. User Avatar

    Hi all. There is no need for a javascript fix for this problem. There’s a very simple solution for fixing the IE7 z-index render issue with CSS. Take the following overly-simplified dropdown setup.


    yadda yadda

    The issue being that the menu inside <header> is ending up under the block of <content>.

    The glitch comes from the relative and/or absolute positioning of the drop down menu items, and anything else that is positioned with these. IE7 interprets these as being out of the flow of the DOM, and ignores the z-index of items following.

    The way to fix it is so simple it borders on ridiculous. Apply a position:relative to the <header> block, and set your z-index here, not on the menu. Then set a position:relative on the <content> and IE7 will understand the relationship order between these two blocks, and therefore is able to understand and render the z-index properly. Hope this helps people that wander in here in the future!

  30. User Avatar
    Andrea Puiatti
    Permalink to comment#

    Hey Mark,

    you know what, it’s 02:32 am here now and thanks to your tipp I can now go to bed.

  31. User Avatar
    Liesl Kok
    Permalink to comment#

    Excellent! Thanks for posting this solution ;-)

  32. User Avatar
    Permalink to comment#


    You are correct, javascript is not required to fix this problem in IE7. In fact it is a performance hit to use JS, because the Javascript engine in IE7 is really slow.
    All you have to do is set your CSS relative postioning and decremental z-index values on parent nodes and their children for IE7.

    Don’t use javascript! Correct your css for IE7.

  33. User Avatar
    Permalink to comment#

    There’s another one: using a filter for gradient causes additional z-index bugs in ie8/9.

    So for example, place a gradient navbar with fixed position at top of page. If you place a dropdown in this navbar, the display of the dropdown will be cut off, as if you have z-index issues. Remove the filter for IE gradient and you are ok.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.