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;
});
};
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.
Kl. will come in handy.
Thanks for posting this. Good stuff.
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.
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?
PrototypeJS Method:
var zIndexNumber = 1000;
$$("div").each(function(e) {
e.setStyle({ zIndex: zIndexNumber });
zIndexNumber -= 10;
});
Good job. Thanks for your share.
Fantastic.. Mootools script was the only thing that saved me!!
THANK YOU FOR THIS FIX (yes, the caps are intentional :-) ).
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
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.
Thanks Buddy, You saved my day.
Thanks a million ! That was just the fix I urgently needed.
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> </div> </div>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?
Thanks!
It seems to work . Thank you!
You are genius dude! Thanks a lot ! Now I can chill out and watch a movie.
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(){
$(this).css(“z-index”,z_index_max).siblings(“li”).css(“z-index”,z_index_default);
}).bind(“mouseout”, function(){
$(this).css(“z-index”,z_index_default).siblings(“li”).css(“z-index”,z_index_default);
});
This worked great!
I had an Issue with some content disappearing, but I upped the variable zIndexNumber to 3000 and everything works great now.
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!
question: where does Chris’ jquery snippet go in a wordpress theme? In functions.php?
Sorry, newbie here..
Thanks for trick. This hack-idea saved me
Just noticed the background transition on the textarea, love it!
Just what I needed! Thanks.
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;
});
Tried the jQuery version and worked. Thanks :D
Thank you, tried every css trick I could think of, then BAM — jquery’d IE right in the DOM.
Awesome saved my day :)