Web Design Blog
Popular Posts
Categories
How to fix z-index stacking in Internet Explorer
Posted on Monday, October 26th, 2009 under CSS by Dustin Brewer.Having trouble with elements (divs, tables, ul, lists, etc) stacking incorrectly in only IE6 and IE7? Your issue is relatively (pardon the pun) easy to fix without going too far out of your way to fix the issue. This issue has been around for awhile but I feel it is something that should definitely be out there, despite the fact we are talking about going back 8 years (nearly 9) with IE6. They even carried the z-index issue over to IE7. Fortunately the CSS issue is now fixed in IE8 (in standards mode) so we don’t have to worry about fixing it for the newest version of Internet Explorer.
Understanding why Internet Explorer renders z-index incorrectly
The way it works, Internet Explorer starts at 0 and renders each element that comes after the first element at a higher z-index. Which isn’t really a problem unless you have a navigation dropdown that needs to go on top of the content below it. What will happen is your navigation dropdown will go underneath the content below it, effectively hiding some or all of your navigation list. I ran into this issue recently with the CSS navigation Suckerfish dropdown, which reminded me I should post something about IE’s zindex problem.
Fixing IE7 / IE6 z-index stacking bug
The easiest way to fix the Internet Explorer z-index stacking bug is to simply assign the parent element, typically a div, first with position: relative which allows a z-index to be set to the element, then assign a high z-index to that element. What will do is tell Internet Explorer that it should start numbering the elements within that element at whatever number you have set. Effectively resetting the z-index stacking within that element to a higher z-index.
Forcing IE to render z-index correctly with JavaScript
There are times when it isn’t very easy to simply add the relative positioning to the parent element, for instance when you are working with Widgets that may need complex and dynamic z-index assigned to ensure that they stack properly throughout your web app, you need to take matter into your own hands. The script below will allow you to dynamically force a div container and all subsequent elements with the same class to get progressively higher z-index in Internet Explorer. You need jQuery to make this snippet, created by Richa Avasthi work.
function zIndexWorkaround() { // If the browser is IE, if(isIE()) { /* ** For each div with class menu (i.e., ** the thing we want to be on top), */ $("div.menu").parents().each(function() { var p = $(this); var pos = p.css("position"); // If it's positioned, if(pos == "relative" || pos == "absolute" || pos == "fixed") { /* ** Add the "on-top" class name when the ** mouse is hovering over it, and remove ** it when the mouse leaves. */ p.hover(function() { $(this).addClass("on-top"); }, function() { $(this).removeClass("on-top"); }); } }); } }
You also need this CSS class, which is appended by the JavaScript to force the stacking of the elements in Internet Explorer.
.on-top {z-index: 10000;}
With both of these techniques in your arsenal you should be able to fix your website’s Internet Explorer stacking issue easily whether it be a simple CSS dropdown or a more complex web application. Let me know if you have found other ways to resolve this issue other than the two I have mentioned.
Whats Next?
7 Responses to “How to fix z-index stacking in Internet Explorer”
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout my web design portfolio.
[...] Comments [...]
Everyone want to be right, dead right.
hello thank you for this,
but when i apply it in my scripts i have this :
Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in ……
it’s arround this part of the function:
” $(“div.menu”).parents().each(function() { ”
it doesn’t match.
How correct it for making it working in my scripts.
Best Regards.
i’m using joomla! cms
Mine aren’t stacking as in layers, rather, they are vertically stacked. Any fix?
I wanted to thank you for this entertaining site .I for sure loved every little bit of it. I have you bookmarked your web site to look at the latest stuff you place.
Hello there, just wandered by. I have a Oklahoma City 4g website. Lots of information out there. Wasn’t what I was looking for, but very nice site. Cya later.