Tutorial Fixing IE z-index

by in , 0

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

Leave a Reply