Squish the Internet Explorer Z-Index Bug

Winnipeg Web Design

The Problem

The other day when working on my latest website; I had everything working fine until I decided to check how things looked in IE. Usually IE7 plays pretty well, but in this instance there was a crucial problem. I had an absolutely positioned div (hover menu) and under it I had a transparent PNG that was also absolutely positioned. It looked like following:

The Solution

The absolutely positioned div had a z-index of 1000, but @jorenrapini pointed out that IE doesn’t use z-index properly. I came across this quirksmode.org article that explained the flaw in detail:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

The above article does not directly contain a workaround but in the comments a fellow said the following:

giving the parent element a higher z-index actual fixes the bug

I then used the following code on my site:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />

This gave me the result I was looking for.

Don’t ask me why this works but it does!

If you liked this article please keep updated by subscribing to my RSS feed, and following me on twitter (@brenelz)

Start saving on printing services today. Visit our website to learn more about booklet printing today.

Be Sociable, Share!

Written by Brenley Dueck

372 Responses to “Squish the Internet Explorer Z-Index Bug”

Hassan Says:
February 4th, 2009 at 2:33 am

Nice trick! Thanks!
Brian Says:
February 5th, 2009 at 4:21 am

Good tip, bound to come across it sometime as I have started to use absolute positioned divs now.
SteveG Says:
February 6th, 2009 at 10:59 am

I have run into the same problem. My dropdown nav divs would appear behind the main promo div in IE 7 and IE 6. I couldn’t find a solution online at the time. I experimented and ended up using a z-index of -1 on the promo div for IE 7 and lower. That seems to work fine, but I couldn’t tell you why. I’ll try your solution next time.
shin Says:
February 9th, 2009 at 12:06 pm

I have the same problem and I almost gave up to fix it. Thanks for 1000 times. I appreciate it and you made my day.
Sean Says:
February 9th, 2009 at 12:31 pm

Thanks for the trick!
Josh Says:
February 9th, 2009 at 12:37 pm

Wow, great tip! Thanks.
jitendra Says:
February 12th, 2009 at 8:01 am

how to solve this problem for internet explorer http://jitendravyas.com/ie6.html
John Says:
February 14th, 2009 at 9:24 pm

Thanks for the fast tip.
I spent around 8 hours trying to fix this thing.
Although I was trying to do it with a Javascript dynamic iframe and now I’ll do it with a div and with an AJAX call. Thanks to you.
Good and fast demo.
Thanks again.
Andrew Says:
February 16th, 2009 at 2:22 pm

Thanks for the tip! Saved me a ton of grief.
Joe Says:
March 13th, 2009 at 7:11 am

Great! Thanks, it works.
Carl Says:
March 17th, 2009 at 3:48 pm

But this will not work in any other browser, since the content in the child div will then be (correctly) positioned behind the contents in the parent div!
Bob Says:
March 26th, 2009 at 7:14 pm

Absolutely fantastic. Worked perfectly after trying other hacks with zero success. Many thanks!
David Says:
April 2nd, 2009 at 6:25 pm

This post made my day! My divs were all showing up fine in FF and Safari, but disappearing behind the parent div in IE. Thanks for posting and sharing.
Keith Says:
April 5th, 2009 at 2:50 pm

The trick works because IE doesn’t allow elements to have a higher z-index than their parent element. It’s actually a reasonable restriction, if somewhat unneccessary (like Mozilla’s insistence that opacity always inherit).

You can sometimes get around this by taking advantage of the fact that absolutely positioned elements don’t care about their parents (though this can get inconvenient if you’re unfamiliar with your DOM in JS). Simply find a good element to position as relative, then set up independent elements and use the absolute positioning/z-index to put them where you want them.
Nigel Says:
April 13th, 2009 at 1:54 pm

Wow – brilliant! You’ve turned my day around from seemingly unending frustration to a successful and happy one. Thank you very much indeed for sharing this neat trick.
Scott Says:
April 29th, 2009 at 8:35 pm

Thanks. I also noticed that if you have nested absolutely positioned elements this fix won’t work unless you put the higher z-index on the top most relatively positioned element. In other words don’t just put the higher z-index on the parent element, put it on the first parent that is positioned relatively.
Matthew Howland Says:
May 5th, 2009 at 7:44 pm

Thanks for the advice. I had the same problem. It was not just as easy as changing a couple of the indexes, so I wrote a javascript to reindex the divs. All of my stuff was in divs, so it worked. See the code below:

function reIndex(){
forms = document.forms
zi = 2000;
cn = document.getElementsByTagName(‘div’);
for (n=0;n<cn.length;n++){
cn[n].style.zIndex=zi–
}
}

Thought this may help someone else.

Matt
Matthew Howland Says:
May 5th, 2009 at 7:46 pm

I forgot to mention, you call this after everything has already loaded.
Bjorn Thomson Says:
May 15th, 2009 at 5:18 pm

Thank you! Hours of work dropped to a couple of minutes of tweaking…
tison Says:
May 22nd, 2009 at 2:37 pm

Unfortunately both my divs were children of the same element, so luckily:

@SteveG – thank you! Giving the second element a z-index:-1 worked ,

Honestly, can’t calculate the time i’ve wasted on this browser…
Z-index Internet Explorer IE6 | breakthrough design Says:
May 22nd, 2009 at 2:45 pm

[...] Give the element (that should be behind) a z-index:-1 [...]
Rob Says:
June 2nd, 2009 at 2:41 pm

Really neat trick, cheers!
Andrew Champ Says:
June 8th, 2009 at 3:17 pm

THANK YOU SO MUCH! SPENT 2 DAYS (16 HRS) TRYING TO FIX, THIS DID THE TRICK!

.andrew champ
avramir Says:
June 19th, 2009 at 7:38 am

man, thank you so much!!!
Rival Says:
June 25th, 2009 at 5:53 am

Wow, thanks a lot!
Barbara Says:
June 28th, 2009 at 6:02 pm

Thank you for this fix, this one worked for me! I have included it in my binder of potential workarounds for the IE z-index bug:
http://www.livebinders.com/play/play?id=1808
Alaa Al-Hussein Says:
July 6th, 2009 at 5:05 am

I had the same problem.. I added the z-index property to css of the main div and it work.

I am waiting for the day to stop working on IEs

Thanks.
Tyron M. Says:
July 22nd, 2009 at 5:07 am

I had the same problem. A menu that opens up and was hidden behind the main content window.

But adjusting z-index on any element did not help. I got it fixed however, my problem was that my parent element had overflow:hidden;
Watch out for that
Joe Says:
July 22nd, 2009 at 10:49 am

THANK YOU!! life saver.
Benny Says:
July 24th, 2009 at 8:52 am

Thanks – this saved me a lot of time!
Jeff Says:
July 24th, 2009 at 5:26 pm

Thanks for the simple fix.
Priyank Says:
July 25th, 2009 at 1:23 am

ThanKs!!
Ryan Says:
July 31st, 2009 at 4:41 pm

Thanks for the tip. I had to reconfigure my code just a touch to match your example, but it worked great.
Luke Says:
August 2nd, 2009 at 7:10 pm

after hours on end searching for a solution…

THANK YOU!!

may IE die a slow and painfull death
Joren Rapini Says:
August 7th, 2009 at 4:00 pm

Just ran into this problem again, as usual. What Scott wrote earlier is correct – this only works if you are applying it to relative positioned elements – doing it on absolute positioned elements does not help! Stinking IE.
" IE7 et z-index" - CoolCoyote.net Says:
August 12th, 2009 at 9:01 am

[...] j’ai trouvé la solution sur ce blog. J’ai résolu le problème en définissant un z-index le plus élevé sur #header. Ce qui [...]
DaCoder Says:
August 18th, 2009 at 4:59 pm

Saved my bu++

Thanks
Andrew Says:
August 19th, 2009 at 8:26 am

Thanks for this… sorted out my issue in an instant!
Glenn Says:
August 20th, 2009 at 1:39 pm

Thanks you so much.
Helped me on my Crewe United Football Club drop down menu.
pradnya Says:
September 3rd, 2009 at 5:14 am

thank you very much….
It’s help me lots…
Arly Says:
September 5th, 2009 at 7:47 am

really this helps me a lot after 2 hours crazy-ing around with IE.

THANKS!
johnmark Says:
September 7th, 2009 at 8:06 am

Why the hell doesnt microsoft IE conform to CSS standards like all other browsers?
This goes to show that opensource is the way to go…
Long live firefox…
Ben Says:
September 9th, 2009 at 2:44 am

I’ve been searching for this solution for such a long time.

Thank you very much!
ian Says:
September 12th, 2009 at 8:47 pm

Life saver, thankfully you were the first hit on Google.
You just got me out of a jam, thanks again
Sarah Says:
September 18th, 2009 at 5:58 am

Thanks very much…perfect.
Ricky Says:
September 18th, 2009 at 11:26 am

Keith was close when identifying the problem, but wrong.

The issue is that when you give a z-index to a container, it restarts the z-indexing inside of it at 0, and the global-level z-index of everything inside the container becomes the same as the parent.

When you have a container without a z-index, it gets a value of ‘auto’ and *shouldn’t* affect the z-indexing of anything inside of it.

However when internet explorer finds a relatively positioned element with a z-index of ‘auto’, it treats it like it has z-index of ‘zero’, thus restarting the z-indexing inside that container. From that point, everything inside that container has a global-level z-index value of 0.

Your solution worked because the menu aquired a global-level z-index that was the same as its container, which was in turn higher than the image of the car.

To illustrate this, you could give the car a z-index of 500, and change the ’1000′ z-index with a value of ’1′ and it would still work.
Okada Design Blog » Blog Archive » z-index problem with IE Says:
September 29th, 2009 at 10:12 am

[...] This article helped me how to solve IE z-index problem. There is a good comment at the end as well.Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ [...]
Pete Says:
October 14th, 2009 at 6:26 pm

I spent a few hours on this last night and was ready to lose my mind when I found your tip. Other developers have posted complex javascript solutions online, but this solved my problem quickly. Thanks!!
Jess Says:
October 22nd, 2009 at 3:38 pm

that’s so simple that makes me feel stupid for wasting so much time trying to fix it.

thank you very much
JW Says:
October 25th, 2009 at 4:49 pm

This was tweaking me off big-time. Thank you so much for the fix. Your solution was the simplest one for this ridiculous problem. Thanks again!
Lloyd Armbrust Says:
November 4th, 2009 at 12:26 am

Awesomesauce. I was about to kill someone before finding this fix. You rock it.
Greg Says:
November 10th, 2009 at 3:55 am

Hi,
it’s nice solution but not worked for me.
I have same case with menu,but under menu I have tabs. The issue with relative z-index -1 make tabs unavailable.
Finally I did my solution with Jquery and relative position:
jQuery().ready(function(){ $(".slidemenu").hover( function(e) { $('#neg_position').css("z-index","-1").css("position","relative"); }, function() { $('#neg_position').css("z-index","").css("position",""); } ).mousemove( function(e) { $('#neg_position').css("z-index","-1").css("position","relative"); } ); });
slidemenu is container of my menu,neg_position my tabs container

I hope it help to somebody.
timkg» Blog Archive » IE z-index bug Says:
November 10th, 2009 at 7:46 pm

[...] But giving a higher z-index to the menu didn’t made it appear on top of the div below it. This post got the solution: the enclosing element of the menu needs a higher z-index than the actual menu. It [...]
Andrew Mason Says:
November 18th, 2009 at 9:02 am

Just wanted to say thank you. I was struggling with this bug for a while until I found your post. Cheers.
Jason M. Says:
November 24th, 2009 at 6:41 pm

Wow … I spent a couple hours today tryin’ to deal with this same issue. Apparently, not just the parent needs an updated z-index, but so do all the parents! Right up to the HTML tag.

Thank you for this fix! You saved me hours and hours of time.
Alex Says:
November 26th, 2009 at 4:54 am

Hey, this is great, works like a charm!

Thanks for the easy fix
York Says:
December 1st, 2009 at 5:37 pm

thanks mate, it saved me a lot of time~!
Alina Says:
December 1st, 2009 at 6:15 pm

I cannot seem to get this to work for this page: http://yogasports.biz

Can anyone help?

The dropdowns appear behind the flash animation
Anna Says:
December 2nd, 2009 at 1:53 pm

Worked perfectly. Thank you!
Anna Says:
December 2nd, 2009 at 1:54 pm

Alina,

Try making your Flash transparent. Should fix the problem.
dev Says:
December 3rd, 2009 at 5:42 am

In addition to what Ricky said, IE always assigns a global z-index of 0 no matter whether the element is relatively or statically positioned whenever its z-index is not specified.

So, the workaround would be to set a higher z-index of the topmost parent element (immediately inside body) containing the menu.
yenny Says:
December 6th, 2009 at 9:18 am

thank you
Ricky Says:
December 9th, 2009 at 11:15 am

dev, you’re right, but it is only on relative & absolutely positioned elements. If you remove the position: relative or position: absolute from the parent, the problem goes away. However this is rarely an option that is available.
amrish Says:
December 10th, 2009 at 3:15 am

thanks a lot…saved my day
Vera Says:
December 11th, 2009 at 8:12 am

great tip! now just to squash IE…
Mohammed AbdelRahman Says:
December 15th, 2009 at 1:56 pm

saved my time! thanks
Frank Says:
December 15th, 2009 at 9:07 pm

Thank you so much, that just saved me so much time!
Neal Says:
December 16th, 2009 at 3:31 pm

You da man. Thanks!
Internet Explorer Stylesheet Limit | Damian Nicholson Says:
December 21st, 2009 at 3:28 am

[...] figure IE inconsistencies like the double margin bug, png fix and z-index issue all to be common knowledge amongst web developers and designers. But why not this one? Surely the [...]
David McMeans Says:
December 29th, 2009 at 1:34 pm

Saved my bacon. Thanks! (I hate ie7)
Jared Says:
December 29th, 2009 at 2:06 pm

Thanks! This helped a lot. Also, thanks for the link to the quirksmode page.
Jerome St. Sauver Says:
January 1st, 2010 at 11:29 pm

Thank you, Thank you, Thank you.
Prowebdesign Says:
January 5th, 2010 at 9:32 am

Scott – you are genious! Excatly what i needed here!
Jason Says:
January 5th, 2010 at 7:08 pm

Thanks mate, solved my problem
Flemming Rubak Says:
January 13th, 2010 at 3:07 am

Good trick – unfortunately it doesn’t always solve the problem, especially with javascript and flash elements.

Instead you can stack the parent elements and use position:relative together with z-index. That stacks correctly in all IE versions.
Bart van Irsel Says:
January 15th, 2010 at 4:15 am

Thanks a lot!

This really helped us out. Time for IE7 itself to be squished!
Stanny Says:
January 15th, 2010 at 12:06 pm

I think I love you, man
@nomadone Says:
January 17th, 2010 at 7:20 am

Thank you so much, life saver, been struggling with this for ages now. Your solution worked, so quick & easy.
Aleksandar Says:
January 19th, 2010 at 3:19 am

Thank you…
mccormicky Says:
January 19th, 2010 at 10:50 pm

The plague of my existence, squished!!!
eg Says:
January 20th, 2010 at 6:03 pm

There’s 2 days of my life I won’t get back…

So quick, so easy, so works in every browser. Thanks!
Sam Says:
January 21st, 2010 at 12:45 am

Thanks heaps, life saver
Sushil Kumar Raghav Says:
January 25th, 2010 at 8:27 am

Thanks Bro… its really work..

Keep it up bro.. …
vedran Says:
January 27th, 2010 at 4:13 am

This solve my problem. Thanks a lot!
Revisiting the HTML image map « Work with ChoiceCuts Says:
January 27th, 2010 at 8:53 am

[...] Map due to IE not co-operating when I put a drop-down menu on the same page. This article from Brenelz Web Solutions saved the [...]
Colby Wright Says:
January 29th, 2010 at 1:38 am

Just wanted to say thanks for this tip. Its so simple but really works.
Thank you.

Colby Wright
Kley Says:
February 5th, 2010 at 12:50 am

I am going crazy here. Where do I actually put this code? In the body html or in some js file? I have no idea where to put the code and I have tried everything but the menu still displays behind the graphic. Please I need help
Sådan fixes IE7’s z-index bug med jQuery » Netsans Says:
February 9th, 2010 at 5:51 am

[...] løste ikke umiddelbart mit problem. Jeg havde imidlertid andetsteds læst, at man skulle kunne løse problemet ved at give det relativt positionerede forfade…, end det absolut positionerede [...]
Internet Explorer 7 Z-index Bug | Mvied Designs Says:
February 9th, 2010 at 11:59 am

[...] I found a pretty good example of this bug in this article – Squish the Internet Explorer Z-Index Bug | Brenelz Web Design Solutions [...]
Tim Says:
February 10th, 2010 at 9:12 pm

Wow you rock, finally found a solution!
Mark Says:
February 11th, 2010 at 1:17 pm

My Thanks as well – I basically walked every node up from my Navigation DropDown and added one to the z-index or added it if it was not ther to every CSS item up the tree in my IE7 Override css and my IE 6 overrides. I then removed each one until I found the one that mattered – about 20 minutes total after 3 days of trying to solve…. Was the first node even with mine
Dizzle Says:
February 16th, 2010 at 3:20 pm

Thank you for posting a straight forward solution with example, everyone else likes to point out they are aware of the bug don’t don’t bother sharing how they fixed it!
Nikita Sumeiko Says:
February 18th, 2010 at 4:14 am

Thanks a lot. Really helped!
Nikita Sumeiko Says:
February 18th, 2010 at 4:15 am

Also twitted your post here:
http://twitter.com/manakor/status/9277818368
m.a.c.h.designs Says:
February 19th, 2010 at 10:33 am

Simply thankyou!

damn it I hate IE!
Jeff G Says:
February 19th, 2010 at 4:46 pm

I love you! I had read through 5 other answers on other forums, etc, and nothing worked. Thanks, man!
jappe liljedahl Says:
February 22nd, 2010 at 1:51 pm

thanks it solved my problem
Jody Says:
February 24th, 2010 at 4:25 pm

Still not working…I’ve changed every z-index in my CSS file back and forth and the dropdown still does behind the div. In Firefox too. *sob*
Joey G Says:
February 24th, 2010 at 6:35 pm

Like everyone else here I am very thankful for the nice job you did on this and the other solutions. I never would have thought that one bug would get so many people. I am lucky that I didn’t spend as much time as some of these people thanks to your site!

Much Appreciation!!!
Teresa Hardy Says:
February 24th, 2010 at 8:15 pm

That actually worked for me on two divs that weren’t even positioned absolute, but relative. Thank you, you saved my evening!
ken Says:
February 25th, 2010 at 2:39 pm

I remember this was working for me, too, once in a while but today for whatever reason is not. Keep trying.
Jonny Says:
March 3rd, 2010 at 5:11 am

Thank you! I had forgot how to fix this bug and after reading your solution I’ve fixed it in no time!!
Great!
Gaby Says:
March 4th, 2010 at 7:17 pm

life saving … thanks a lot ..
Vicki Says:
March 5th, 2010 at 10:46 am

Thanks so much for this.
Marcysecrets Says:
March 11th, 2010 at 8:38 am

Fantastic tip. After 4 days of frustration, Im half way getting it to work based on your solution. My left menu subitems flyout to the right and overlap content on the right but still ‘underlaps’ the content below. A little more tweaking I guess but nearly there.
Wish you had some adsense ads I could click to say thanks.
Well, very many thanks.

Awardebooks.com, DigitalProductStore.com
Haluk Says:
March 12th, 2010 at 4:37 pm

Worked great for me! Thanks a lot!
Web Design Maidstone Says:
March 15th, 2010 at 1:03 am

Great tips, was struggling on this!
Mariani Mirko Says:
March 18th, 2010 at 3:32 pm

Thanks a lot from an italian web designer…
Dinesh Chanchalani Says:
March 25th, 2010 at 1:20 pm

It indeed worked! And indeed, very quirky!
Thank you, though!
brainox Says:
March 29th, 2010 at 1:56 pm

Thanks a lot for 1000 times. You make my day.
Paul Says:
March 29th, 2010 at 4:42 pm

just as I readied to throw my computer through the nearest wall, I found this article. Worked like a charm. Thanks!
Dan Says:
March 31st, 2010 at 6:14 am

Awesome! Thanks very much. Worked a treat
Scott Richardson Says:
March 31st, 2010 at 6:46 pm

Worked a treat for me. Thanks dude.
CBloss Says:
April 2nd, 2010 at 8:49 pm

I must thank you a thousand times over. I’m sitting here at work, working really late and frustrated with IE. I ran into this problem today and articles said that “Oh just place z-index around and sooner or later it’ll get it”, but you solved my huge problem easily. THANK YOU!!!
Don Says:
April 5th, 2010 at 11:56 am

This worked well for me.
$(function() { if($.browser.msie){ $('div').each(function(i) { if($(this).css('position')!='absolute') $(this).css('zIndex', 1000 - (i * 10)); }); } })
jack Says:
April 6th, 2010 at 9:54 am

Tried all the Javascript fixes – even ventured into Prototype land. Had to set the z-index on the ‘grandparent’ element, and it works a treat.

Nice one, thanks.
Alan Says:
April 11th, 2010 at 6:59 am

I just got a similar issue with IE8, the solution was frustrating simple, set z-indexes on the container div’s, forget about the child elements.

[div style="z-index: 2;"]Absolutely positioned menus[/div]
[div style="z-index: 0;"]Content[/div]

Got the hint here: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Julie Says:
April 12th, 2010 at 3:14 pm

I wish I had searched for this fix sooner…would have saved me a headache. Thanks for posting.
Jörg Says:
April 14th, 2010 at 5:24 am

Thanks a lot! Searched the whole day yesterday, but you are the first workaround to this problem!
Dave Says:
April 15th, 2010 at 9:20 am

saved my day! thanks, mate
vladh Says:
April 17th, 2010 at 2:58 pm

this is a dumb motherfucking problem
Philip Phelan Says:
April 21st, 2010 at 6:50 am

Thanks… I HATE MSIE! I waste SO MUCH TIME on it!
gorlok Says:
April 22nd, 2010 at 12:39 pm

Thank you so much! MSIE “IS” a bug.
Aamir Afridi Says:
April 27th, 2010 at 5:52 am

Thank for the tip. This issue was driving me nuts :/
And yes no body will ask you why it works like this because everyone know IE specially IE6 who already died http://ie6funeral.com/
Dennis Says:
April 28th, 2010 at 10:33 am

Had the same problem here – not the first time it occurred. Don’t forget any absolute- or relative positioned element in line. I simple missed the very first element, which was positioned relative; added a higher z-index and am in heaven now. Thanx you guys!
Pierrik Le Gall Says:
May 1st, 2010 at 2:38 pm

Thanks a lot for this blog post. It has saved me hours (I had the problem on the language switcher on http://piwigo.org )
Jimba Says:
May 3rd, 2010 at 10:33 pm

thanks Buddy!
WebArs Says:
May 4th, 2010 at 12:05 pm

Thank you! I thought this problem has no decision
Ken Says:
May 12th, 2010 at 9:32 pm

Thanks! Worked great for me too.
Gia Says:
May 17th, 2010 at 3:12 pm

Thanks, worked great!
Todd Welling Says:
May 20th, 2010 at 11:02 pm

Cheers dude. Fixed me up well!
IE blows pretty hard…
I think there should be a movement to actually STOP sites loading in IE, and force users to use FF or other if they want to view your site…. if only we could.
Suresh Selvaraj Says:
May 26th, 2010 at 7:27 am

Thank U Buddy, you really made my day.
Joel Glovier Says:
May 26th, 2010 at 9:30 am

@Alan – thanks for posting:

“Got the hint here: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/”

I tried the suggestion on this page but it didn’t work for me. However, when I went to that link you shared and applied my z-index to the “header” div and the “mainConent” div, all is well now.

But thanks just the same to this author for your fix, and may God give us all grace who have to support IE.

(site with my issue in question: http://betawww.helpcurenow.org)
Amar Says:
May 28th, 2010 at 7:47 am

Thanks for your explanation.
pSYeNCe Says:
May 28th, 2010 at 2:49 pm

Hey, just wanted to mention that IE8 now handles z-index correctly if it’s not in compatibility mode. Even with this workaround I couldn’t get my menus to work, since setting it to -1 made all my links stop working in Chrome. No idea why. But I found out I was working in compatibility mode in IE, and switching over fixed it.
Roger Hatfield Says:
May 29th, 2010 at 6:00 pm

Thanks! I didn’t have much hope this would actually work as I don’t usually get these little IE bugs fixed with just one try, but voila’ it worked the first try. I would have never even thought of applying or changing the parent divs z-index property. Thanks again!
Links and Bits for May 31st — Alex Jones Says:
May 31st, 2010 at 10:02 am

[...] Squish the Internet Explorer Z-Index Bug. This helped solve a really odd overlap issue in IE [...]
Simon Says:
June 1st, 2010 at 11:30 am

Thanks, had precisely the same issue with an absolutely positioned flyout menu. Solved now! Cheers.
Aroh Says:
June 2nd, 2010 at 3:49 am

jQuery().ready(function(){
$(“.slidemenu”).hover(
function(e) {
$(‘#neg_position’).css(“z-index”,”-1″).css(“position”,”relative”);
},
function() {
$(‘#neg_position’).css(“z-index”,”").css(“position”,”");
}
).mousemove(
function(e) {
$(‘#neg_position’).css(“z-index”,”-1″).css(“position”,”relative”);
}
);
});

Works perfectly.

Thanks Greg
Passport web Says:
June 7th, 2010 at 1:13 pm

Thanx a million!!!

Not the only thing in IE that I’ll never understand why it happens…
Charlie Says:
June 10th, 2010 at 2:45 am

Cheers, worked a treat
Manzoor Says:
June 10th, 2010 at 11:48 pm

Fantastic………Its working properly..Thanks for your post…
Tampa Website Design Says:
June 17th, 2010 at 7:01 am

Thanks! This worked great for me..
avd Says:
June 21st, 2010 at 10:15 pm

Don’t elements have to be positioned to use z-index? And even if the parent element is, this doesn’t work. Sorry.
Kelly Says:
June 22nd, 2010 at 10:34 am

Oh!! Perfect! Exactly what I was looking for. You just saved me from so much frustration. Thanks!
http://weblog.hamsterdesign.si/ Says:
June 28th, 2010 at 2:11 am

Good tip for work-around. I had to use z-index with – (minus) value to get it work in IE, otherwise IE was refusing to send DIV in background. Ah, naughty IE!
seb Says:
June 30th, 2010 at 12:42 pm

saved my evening. some beer is reservated for you if you are around germany once…
Satan Says:
July 2nd, 2010 at 4:40 am

Your solution sucks! The problem is the attribute “relative” in my general wrapper div.
Steve Castro Says:
July 2nd, 2010 at 10:36 am

Solution worked perfectly. I used it for the navigation drop down.
Gary Says:
July 6th, 2010 at 9:08 am

Don’t you just love the internet. I had this exact same problem and was wracking my brains. Thanks for hi-lighting the solution. Harmony has once again been restored!
werejo Says:
July 6th, 2010 at 8:36 pm

A year later and you are still saving people’s asses with this!

Great job!
Bathlamos Says:
July 8th, 2010 at 1:16 pm

Hi,

I’m having difficulties finding a solution to my z-index problem. In my page, the class .txtWrapper should contain both .txtWrapperOFF, a textbox and .txtWrapperHover. txtWrapper OFF should be under the txtWrapperHover class and the textbox should be on top of all. However, it doesn’t display correctly in IE.

.txtWrapper{
height:22px;
width:163px;
background:#006;
z-index:500;
position:relative;
}

.txtWrapperOFF{
z-index:100;
position:absolute;
background:#909;
}

.txtWrapperHover
{
white-space:nowrap;
z-index:150;
position:absolute;
background:#0F0;
height:22px;;
width:60px;
}

.txtDefaultTextBox_Class
{
outline:none;
border:none;
color:#858582;
font:Tahoma, Geneva, sans-serif;
background-color:transparent;
position:absolute;
z-index:200;
margin-left:6px;
background:#F00;
}

$(document).ready(function()
{

$(“.txtDefaultTextBox_Class”).ready(function(){

$(“.txtDefaultTextBox_Class”).wrap($(‘.txtWrapper’));

});
});

$(function () {
// set opacity to nill on page load
$(“.txtWrapperHover”).css(“opacity”,”0″);
// on mouse over
$(“.txtWrapper”).hover(function () {
// animate opacity to full
$(this.getElementsByClassName(“txtWrapperHover”)).stop().animate({
opacity: 1
}, 100);
},
// on mouse out
function () {
// animate opacity to nill
$(this.getElementsByClassName(“txtWrapperHover”)).stop().animate({
opacity: 0
}, 1000);
});
});

Can someone help me please?
Bas Korsmit Says:
July 8th, 2010 at 2:12 pm

Thanks a bunch! It’s a pity though, that these kinds of post have to exist.
iPaddisti Says:
July 14th, 2010 at 8:00 am

Great!!!! Internet Explorer 6 is a pain in the ass. Thank your for the fix!
IE 6 Z-Index positioning | Samuel R W East Says:
July 14th, 2010 at 11:15 am

[...] of my website after bashing my head against a wall i found a solution which was explain here z-index issues. After reading up on this article it gave me a better understanding off the [...]
bokiboka Says:
July 16th, 2010 at 3:46 am

Perfect, Thank you
Todd Says:
July 17th, 2010 at 8:48 pm

Hey there… I managed to get your fix to work on one site, but can’t get it going for another. Can you take a peak at http://www.thenuts.tv and see why the logo is HIDDEN in IE, as opposed to ontop in FF.

I’ve done 3 levels of parent z-indexing to try and fix it

Thanks in advance dude…
Todd Says:
July 17th, 2010 at 9:08 pm

All sorted – had to take it all the way up to the base level to get it to work.
Paul Says:
July 18th, 2010 at 6:26 am

Thank you – this worked a treat and saved me a headache
Dan Says:
July 19th, 2010 at 6:17 pm

Thank you for the post and keeping in up for over a year! I’ve been trying to figure this out for a couple of hours and finally decided to Google it. Found your post that way. Bravo!
Boobalan Says:
July 20th, 2010 at 6:13 am

Hi,

The technique is really useful to user like me.I mean anti-ie user…..
Graham Says:
July 21st, 2010 at 7:44 am

I was having trouble implementing your fix, it was all exactly the same except using SPANS instead of DIVS with no effect what-so-ever.

A change of elements and my headache is gone!
Stargazer Says:
July 27th, 2010 at 9:40 am

To expand on my post earlier, you can find an in-depth look at this bug
here
Farzan Says:
August 1st, 2010 at 5:55 am

Thank you you saved my hairs…
tot2ivn Says:
August 2nd, 2010 at 8:27 pm

Great trick man ! Really don’t know why this works !
igrafix Says:
August 7th, 2010 at 11:31 am

thank you, thank you, thank you! Just saved me a lot of time. What a great tip, thanks for sharing this.
Navid Says:
August 10th, 2010 at 11:25 pm

Thank you so much
you guide fix my problem
Linkscheucher – 26.07.2010 bis 11.08.2010 - Der Pixelscheucher Says:
August 11th, 2010 at 12:31 pm

[...] Squish the Internet Explorer Z-Index BugThe Problem<br /> <br /> The other day when working on my latest website; I had everything working fine until I decided to check how things looked in IE. Usually IE7 plays pretty well, but in this instance there was a crucial problem. I had an absolutely pos var flattr_wp_ver = '0.9.11'; var flattr_uid = '9242'; var flattr_url = 'http://pixelscheucher.de/linkscheucher-26-07-2010-bis-11-08-2010'; var flattr_btn = 'compact'; var flattr_hide = 0; var flattr_lng = 'de_DE'; var flattr_cat = 'text'; var flattr_tle = 'Linkscheucher – 26.07.2010 bis 11.08.2010'; var flattr_dsc = 'Und hier mal wieder ein paar Dinge, die ich las, für gut befand und euch auch noch damit nerve: Google Streetview: Die Stunde der Hypokriten | Just my (2 Cent) | Dennis KnakeSehr wahr Your Design Is Wrong (And Here's Why) ~ Flyosity by Mike Rundle Better Source Safari Extension Battle of the Burgers: American Fast Food Sites Compared | Design ShackLeckere Burger bedeuten nicht immer auch leckere Websites Don’t Be Ugly By Accident! « OkTrends Cross-browser drop shadows using pure CSS — Nick Dunn Simple Tagebücher: Blogdesign auf neuen Wegen! minimalistisch, einfach, blog, micro | daswebdesignblog.de :: Artikel, Tutorials, Freebies und Interviews Das <wbr>-Element in HTML5 • Peter Kröner, Webdesigner & Frontendentwickler Facebook GUI free PSD resource – Surgeworks — Blog 500 Internal Server Error500 Internal Server Error 4 Essential Extensions for Adobe Fireworks Wait till I come! » UK Government says no to upgrading IE6 – who is'; var flattr_tag = 'linkscheucher'; linkscheucherLinktipps [...]
FireRoxy Says:
August 13th, 2010 at 6:43 am

i was searching this and i’ve found your page. short and very nice trick:)
kuloh Says:
August 17th, 2010 at 3:48 am

very nice trick indeed.. hit the nail on the head. thanks
Joe Says:
August 18th, 2010 at 5:45 pm

You sir, are my hero of the day.
Alexander Says:
August 21st, 2010 at 2:13 am

Amazing trick. Thanks very much.
Massimo Says:
August 25th, 2010 at 6:58 am

Very useful trick… it solves my problem!
Thanks.
LiNk Says:
August 26th, 2010 at 12:42 pm

Perfect.
Timo Says:
August 31st, 2010 at 2:03 am

Thanks for the post. I spend hours trying to fix this bug. You made my day.
Jane Says:
September 1st, 2010 at 8:27 am

Thank you so much, this help me tremendously!
Mike Says:
September 1st, 2010 at 9:41 am

I know you already have lots of thank you posts, but you seriously deserve another! This has been bugging me on 2 sites im developing for ages – perfect, works a charm. Thanks very much!
Matt Garcia Says:
September 2nd, 2010 at 5:19 am

I struggled with the same problem for hours! but this works! fantastic!
Georg Says:
September 2nd, 2010 at 5:50 am

Thanks for that post. It solved my problem after reading lots of other suggestions!
Dave Says:
September 2nd, 2010 at 7:00 am

YEAH, Thanks for the great fix!
jonagod Says:
September 8th, 2010 at 6:44 am

Thanks Worked a treat! why is IE so consistently shit, and you know this bug will be carried on to the next version, as if to say its retarded why of rendering is sort sort of standard
Andrea Says:
September 9th, 2010 at 1:06 am

You saved my morning!
Chris Murphy Says:
September 10th, 2010 at 8:11 pm

Nice catch–I just ran into this bug for the first time and was about to start some seriously (uneeded as I see now) refactoring of the markup.
Becca Says:
September 13th, 2010 at 1:56 pm

Thank you!!
links for 2010-09-13 | Jeff's (Mastermesh's) Delicious Links Says:
September 13th, 2010 at 6:32 pm

[...] Squish the Internet Explorer Z-Index Bug | Brenelz Web Design Solutions [...]
Jason Says:
September 17th, 2010 at 4:42 pm

Thanks! This helped a ton! I was getting so frustrated after spending hours of messing with CSS and not getting any results. Safari, Firefox, IE8 were all working good, just IE7 giving me a headache! This put an end to my headache! I appreciate you sharing this info!
Aric Says:
September 19th, 2010 at 4:13 pm

Oh man, I could kiss you.

This trick helped out. Once I figured out to apply the higher z-index to the main parent div, everything came together.
Scott Says:
September 20th, 2010 at 8:51 pm

Thanks for the tip. It worked for me as well!
Pal Says:
September 21st, 2010 at 4:53 pm

Giving a higher z-index value to parent element solved my issue. Thanks!!
Samuele Says:
September 29th, 2010 at 10:50 am

Just what I need! Thx
Bjorn Says:
September 29th, 2010 at 7:14 pm

Amazing how many people this continues to help! Including me! Good work and thanks!
Janaka Says:
October 1st, 2010 at 5:15 am

Thanks
Andy Says:
October 5th, 2010 at 2:46 pm

Thank you!! Couldn’t find the answer anywhere else!

I took your advice, and had to apply a slowly down counting z-index to about 10 parent items, but it worked. Thanks again.
Brian Says:
October 8th, 2010 at 9:23 am

Worked great, thanks!
iamjerson Says:
October 9th, 2010 at 2:13 am

Thanks for the tip its really weird thing about ie’s implementation with z-index 1000 times does not work for me but maybe for some reason giving -1 and -0 to z-index seems solves my problem
Dustin Says:
October 12th, 2010 at 9:28 am

I found your post after struggling with this issue for almost a day. The fix worked perfectly, you are a life saver. And IE can go to Hell!
Bohdan Smaha Says:
October 13th, 2010 at 5:15 pm

Dude, you are a genius for finding this! thanks! Worked like a charm!
Logo Designer Says:
October 15th, 2010 at 8:31 am

Wowww…. amazing trick…
I was trying to solve the problem for several hours but after checking your post… It only took 2 to 3 minutes to fix it.. Thanks a lot
Kevin Says:
October 21st, 2010 at 6:58 pm

Thanks, Brenley! This article was a life saver.
Mike Says:
November 11th, 2010 at 7:09 am

You saved me hours! Big thanks!
Klaesjes Says:
November 11th, 2010 at 3:43 pm

I’m not gonna ask you why it works, but i’m glad it does! Thanks!
Martin Says:
November 15th, 2010 at 1:03 pm

Thank you!

Works a treat…

If we were at a bar, i’d be buying you a drink…

Thanks.
Ana Says:
November 17th, 2010 at 12:05 pm

Praise be! Thank you so much for this trick… I was close to the brink with this maddening little bug.
Mizbha Says:
November 24th, 2010 at 2:06 am

Hi,

I have a html form with a div tag as well as an iframe in that… the src of the iframe has a drop down. This dropdown overlaps my div tag. Is there any way we can get rid of this issue?
Edvinas Says:
November 24th, 2010 at 3:02 am

Thanks!!!!!
Steve Says:
November 25th, 2010 at 4:09 am

worked as op stated…I think I love them (…still hate ie though meh)
Oli Says:
November 25th, 2010 at 4:23 am

Well, that just saved me a lot of time! Thanks!
Maksym Says:
November 25th, 2010 at 4:11 pm

Thank you a lot!!! That saved me a lot of time and helped to keep my code clear.
Ben Jackson Says:
November 29th, 2010 at 10:24 am

Thanks for the well described solution to this problem. Its good to see that an IE specific issue actually has a logical reason behind it.
Christian Says:
November 29th, 2010 at 9:23 pm

It worked for me thank you very much
Jone Ekhoff Says:
December 1st, 2010 at 11:49 am

Hrmm that was creepy, my comment got eaten. Anyway I wanted to say that it’s nice to realize that someone else moreover mentioned this because I had problem finding the same info elsewhere. This was the first rest that told me the answer. Thanks.
Will Spurway Says:
December 2nd, 2010 at 6:25 pm

Thanks for the tip – as someone else has observed it also seems necessary to make the parent DIV “position:relative”. My curiosity about all this is that the problem only presents itself with the Website on the host server – my local version works fine without the fix. Microsoft you make our lives so interesting!
deilincan Says:
December 6th, 2010 at 9:46 am

Thanks for the tip !
p Says:
December 8th, 2010 at 11:21 am

I was reading on this for ages and none of the tips and hints worked! but this worked like a charm….
anand kumar Says:
December 8th, 2010 at 11:55 am

omg! I don’t know how to thank you! Your trick supported by a comment(no. 15)from @Scott really solved my many years problem.
ahh! relieved!. As a token of my love I am joining your facebook group.
Thanx! once again!
Sisir Says:
December 15th, 2010 at 1:42 am

Hi, thanks! You save the day!! I was having the same problem. I works
DjebbZ Says:
December 15th, 2010 at 6:15 am

Thanks ! You saved my day (in 2 minutes !
Justinas Says:
December 23rd, 2010 at 6:46 am

This saved my life. Thanks man.

——————-
Don Says:

April 5th, 2010 at 11:56 am

This worked well for me.

$(function() {
if($.browser.msie){
$(‘div’).each(function(i) {
if($(this).css(‘position’)!=’absolute’) $(this).css(‘zIndex’, 1000 – (i * 10));
});
}
})
Kinetic one Says:
December 28th, 2010 at 5:03 am

Thanks for the ‘trick’.
But it still surprises me that so many people keep on accepting this stuff.

I lost about a day -which are non billable hours- and was lucky I found this blog.
One can think, it’s an achievement solving this, but this shouldn’t be solved by us developers in the first place!

After 15yrs in the business, html, css, js and all the supposedly standards haven’t improved at all.
Cebollino Says:
December 29th, 2010 at 4:31 pm

Awesome, thnx man for sharing the solution.
I really appreciate that.
Gabriel Says:
January 4th, 2011 at 8:28 am

Best method available! Congrats!
Lester Says:
January 7th, 2011 at 2:44 pm

Great Article! I was stuck on this problem for weeks with my dropdown menu, and this completely solved it! I really appreciate it, thank you!
Avijit Chinara Says:
January 10th, 2011 at 1:46 am

Thanks, the concept is awesome. z-index in parent works fine in ie6,ie7 and other browsers.
Ryan Wiesjahn Says:
January 10th, 2011 at 10:41 am

<3
bangla music Says:
January 14th, 2011 at 2:39 am

What a nice trick. It helps me so much. The ie z-index was boring.

Finally I got a solution.
Catalin Says:
January 18th, 2011 at 7:05 am

Brilliant! Thank you!
Olivier Says:
January 19th, 2011 at 4:54 am

Youre THE man
thank you so much for this ie trick!
Yvan Says:
January 21st, 2011 at 2:36 am

You saved my day! After a last check by the client i saw i was forgotten to check the menu-items. They disappeared behind a photogallery. But this solution was my daysaver.
Thnx
leo Says:
January 24th, 2011 at 6:48 pm

hey mate really good post cheers!!
u Says:
January 31st, 2011 at 1:43 am

thx! great tip
Paul Hastings Says:
February 7th, 2011 at 3:25 pm

Thanks for the tip. Though it didn’t work for me this time (I ended up giving the image “z-index:-1″) I’ll keep this in mind for future work.

-Paul
Slavi Says:
February 10th, 2011 at 4:02 am

Hi,

Thanks for the tip. This trick worked great!
keep sharing man

Slavi
digitalkev Says:
February 10th, 2011 at 6:59 pm

Thanks a lot! This trick really helped me. I was on the verge of frustration
Richard Says:
February 14th, 2011 at 4:41 am

Brilliant. Thanks so much. I was almost at Witt’s End. Maybe oneday a release of IE will come out that behaves, although I doubt it.
Thanks for your help, I hope other people find this page.
Mattis Says:
February 14th, 2011 at 3:18 pm

Thank you. great fix, Using IE should be illegal.
David Says:
February 16th, 2011 at 1:22 am

Good post. I elaborated more and wrote a jQuery plugin based on your post. See http://www.davidtong.me/z-index-misconceptions-bugs-fixes/
tester Says:
February 17th, 2011 at 10:47 pm

thank you!
Tom Says:
February 18th, 2011 at 12:06 am

Excellent work-around there. You just saved me a lot of time and aggravation with IE – thank you.
Nancy Says:
February 23rd, 2011 at 3:53 pm

Wonderful fix, well explained. You saved me a lot of time, many thanks!
Paris Wells Says:
February 26th, 2011 at 7:19 am

Thank you! IE the bain of my life!
ansa Says:
February 28th, 2011 at 11:31 am

this tip save my day
thank you
Tayyab Says:
March 1st, 2011 at 1:41 am

Thanks for solution.i wasted 3 hour on same problem but got solution from this post.thanks much
Rohini Says:
March 1st, 2011 at 6:19 am

Thanks so much, its a really useful article
Sergey Visnevskiy Says:
March 9th, 2011 at 6:05 am

Thank you! You made my day!
Kenji Says:
March 10th, 2011 at 5:10 am

thanks so much,I got a made it !
IE7 z-index Bug and Workaround « Curisu’s Sooorguud Webrog Says:
March 10th, 2011 at 4:26 pm

[...] Brenelz – decent fix, but incorrect assessments in main post [...]
Vasu Says:
March 10th, 2011 at 10:14 pm

I really appreciate about this trick. Why because I have spent almost four hours of time with this issue. Finally I have found your trick and resolved my problem. Thank you so much of thousand times.
Daron Gou Says:
March 18th, 2011 at 10:36 am

Admiring the dedication you put into your website and detailed information you provide. It’s nice to come across a blog every once in a while that isn’t the same old rehashed material. Great read! I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.
Shahid Mirza Says:
March 24th, 2011 at 7:02 am

I can’t stop my self to say thanks for this because i have wasted a lot of time for this bug.
Dan Graves Says:
March 24th, 2011 at 9:00 am

Also sometimes your style needs to define each section in terms of others so that relationships are clear to your browser, such as:
#wrapper #header
#wrapper #page
#page #left_content
Paul Says:
March 28th, 2011 at 8:47 pm

That’s crazy, but it worked. Thanks for sharing!
Zamhick Says:
March 31st, 2011 at 6:15 am

Thanks! This was very helpful.
Terri Ann Says:
April 4th, 2011 at 3:37 pm

I’ve been banging my head against a wall on a similar bug with no luck. Instead of trying to z-index a box over an absolutely positioned element it’s a fixed position element (sliding scrollbar.)
I’ve even tried making the higher element’s parents position:relative with higher z-indexes and nothing has worked in IE for me.
Bob Duncan Says:
April 6th, 2011 at 8:32 pm

Thank you thank you, you saved me
Prabhu Says:
April 7th, 2011 at 1:10 am

Thanks a million man! you saved me…
Sarah Says:
April 7th, 2011 at 4:48 pm

Two years later and your tip is still saving people’s asses. . . or that could be interpreted “two years later and IE still sux”. . . either way, thank you!
Marina Says:
April 8th, 2011 at 3:28 am

The issue mentioned in ‘quirksmode.org’ (http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html) can be solved by setting z-index of the div box2 to -1. Since box1 is inside a relatively positioned div, it’s z-index will get set to 0 as mentioned.
This solutions works fine in both IE7 and IE8.
Tutoriaux Webmasters Says:
April 8th, 2011 at 8:11 am

Yeah ! Thanks a lot it’s worked for me
Thanks god to found your post.
Lazami Says:
April 11th, 2011 at 11:09 am

Great! For my problem, the solution was just tu put z-index at the first relative positioned container, and it’s workinig… Thanks!
lardlad Says:
April 15th, 2011 at 9:01 am

Fixed my problem. Also I noticed I had to bump up the z-index of the uppermost parent that was a sibling of the elements I need to be above.

container1 // // z-index 101
+parent // leave as is
+child // z-index 100
container2 // child of container1 must be above this
container3 // child of container1 must be above this
screwIE Says:
April 27th, 2011 at 8:34 pm

freeeken awesome!
Josh Says:
April 29th, 2011 at 6:42 am

This worked great!

You saved my life!!!
Alex Says:
May 2nd, 2011 at 1:01 pm

I realize you posted this over two years ago, but you saved me some serious time here!

Thanks so much.
RageshRam Says:
May 15th, 2011 at 10:46 am

Hi, Wow…!! its wonderful….Thanks for sharing.
Nick Says:
May 16th, 2011 at 1:19 am

Gold, pure gold.
Danni Says:
May 16th, 2011 at 7:01 pm

Just ran into this problem using jquery and jqgrid where a menu was behind my jqgrid. This trick worked wonders! Thanks
Andre Says:
May 17th, 2011 at 5:27 am

I have a list of menu entries:

the li and the img are positioned “relative”, where the a shows an icon on position x and the img a logo on another position.

if i have 8 menu entries and the first is selectedm IE7 changes the logo using

ul li a:hover img {….}

but if the 3rd menu entry is active, this will only work for 4th and so on, but not for 1st and 2nd.

IE7 places the logo behind the current shown logo, maybe because it doesnt delete the current z-index.

the a:hover img has z-index: 99;
the li#active a img has z-index: 5;

Strange thing and maybe not easy to explain.

Did someone understand the problem? Any hints?

best regards

Andre
Clara Says:
May 19th, 2011 at 4:11 pm

so simple !! thanks a lot !
Daniel Says:
May 23rd, 2011 at 8:06 am

Thanks for the description, this was exactly what I was looking for. Worked perfectly!
Troels C Says:
May 24th, 2011 at 2:36 am

Great trick. Works beatuifully
schua_ozven Says:
May 25th, 2011 at 10:44 pm

Great tip! It actually saved my time and it really helps! Thanks!
Nadia Sanches Says:
June 1st, 2011 at 8:58 am

Oh my God. It’s s simple and I’ve lost almost an hour trying to work around that bug!

Thank you so very much for sharing!
-jlu Says:
June 2nd, 2011 at 6:47 am

After hours and hours I couldn’t make it work (the layout was ocmplicated and i hadn’t much room to modify the pages) so… I had the following idea: Why not change the z-index for all the divs as they appear in the page and target this to IE7 only? Here’s the code:

$(document).ready(function(){ var zIndexNumber = 200; $('div').each(function() { $(this).css('zIndex', zIndexNumber); zIndexNumber -= 10; if ( $(this).attr('id') == 'divinwhichyouwanttostop'){ return false; } }); });

Not too pretty but it works for desperate situations.
Andy Says:
June 3rd, 2011 at 10:09 am

Very good indeed. Works perfectly
Evans Miriti Says:
June 13th, 2011 at 2:39 am

z-index IE problem: fix.
Elements that are position:relative always cover the elements which were position:absolute. Even if the items with position:absolute have a higher z-index

HTML Code

Hello there 1
Hello there 2

Hello World 1
Hello World 2
Hello World 3
Chris Warburton Says:
June 14th, 2011 at 5:14 am

Thanks a lot for this! Worked a charm for my dropdown menus!
Squish the Internet Explorer Z-Index Bug Brenelz Web Design Solutions | Sultan Says:
June 14th, 2011 at 11:06 am

[...] Squish the Internet Explorer Z-Index Bug Brenelz Web Design Solutions. [...]
Anissa Says:
June 16th, 2011 at 7:42 pm

Thank you! I have a deadline tomorrow and this saved my life!
Soyfantomas Says:
June 17th, 2011 at 3:29 pm

Thank you. This advice:”giving the parent element a higher z-index actual fixes the bug” works nice.

Now time to fight with strange borders…
Paespedro Says:
June 21st, 2011 at 3:53 pm

Thank you for sharing. =)
Angie Says:
July 8th, 2011 at 1:31 pm

This worked!!! Thank you so much.
Adam Says:
July 14th, 2011 at 6:51 pm

Genius. I’ve had some friends somehow manage to align a z-index div using tables – which has been hit and miss – but this is a lot cleaner. Thanks.
Andres Says:
July 19th, 2011 at 3:55 pm

I like the image, crashed like IE!
Darfuria Says:
August 2nd, 2011 at 7:34 am

Glorious! Thanks so much!
Alex Thomas Says:
August 4th, 2011 at 3:19 am

LEGEND!
Deniz Porsuk Says:
August 4th, 2011 at 3:32 am

Thanks a billion. Save my hours.
Deepti Says:
August 10th, 2011 at 6:11 am

I was a bit hesitant whether this will solve the issue i had, but it worked wonders!! Thanks for this trick
RKD Says:
August 10th, 2011 at 3:03 pm

This fixed the problem I was having, thanks!
1stclass Says:
August 16th, 2011 at 4:50 am

Where will IE’s complete lack of compliance end? Another simple and elegant solution, well presented! Thank you, Sir you are a saint!
izdelava strani Says:
August 29th, 2011 at 7:52 am

This trick works like a charm. Thank you for saving me from another IE headache day
Gerald Schmidt Says:
September 3rd, 2011 at 10:37 am

Hi,

Thank you very much!!!!! This Hack works!!

This fu**in’ IE makes me angry -.-
It's behind you! IE 7 bug - DesignersTalk Says:
September 5th, 2011 at 10:18 am

[...] might help – Squish the Internet Explorer Z-Index Bug | Brenelz Web Design Solutions __________________ mioojo | [...]
Simon Brandon Says:
September 15th, 2011 at 4:23 am

Top man – saved me a lot of head scratching!
Ricardo Says:
September 24th, 2011 at 5:30 am

Hi!!!!

Many Thanks!!!! I have found same problem but in Firefox!! I messed the z-index!!! Thankyou!!!!!
raghav Says:
September 27th, 2011 at 6:08 am

cool man cool … ur thecoolest man breathing on this planet ,,, seriously … that post killed the bug in bo time … hats off man
Evert Noriega Says:
October 4th, 2011 at 9:58 am

Thank you so much, this tip helped me a lot, it miraculously works!
kp Says:
October 19th, 2011 at 2:41 pm

Made my day!!!
Duy Pham Says:
October 23rd, 2011 at 1:01 am

Wow! Helpful for me. Thank you very murch!!
ALS Says:
October 31st, 2011 at 12:09 am

THANK YOU for this post. I’ve spent hours trying to do this…really appreciate when I find posts as useful as this. I’ll be sure to share my knowledge with others.

Thanks again…
Pushpinder Bagga Says:
November 1st, 2011 at 3:24 pm

works out of the box…
Ahsan Idrisi Says:
November 8th, 2011 at 3:39 am

I was looking for it from last 12 hours and now i found it, Thanks a lot…….
flouSH Says:
November 8th, 2011 at 8:53 am

OMG. THANK YOU!

@everbody having trouble with this advise: JUST look for the UPMOST classes, don’t care about all the stuff below that. Search for “April 11th, 2010 at 6:59 am” here, to see what helped me.

THANKS!
SergeF Says:
November 15th, 2011 at 10:09 am

Thanks for the post. Helped me with IE7 not showing a popup form in the right layer. Sharing the love via Twitter @sergeifilippov & Google Plus +sergei filippov
labidi Says:
November 20th, 2011 at 7:50 am

thanks
Internetbureau Says:
November 22nd, 2011 at 3:59 am

Thank you for this post! Looking for this for a look time now!
Vieux en Mob Says:
November 22nd, 2011 at 5:29 am

Thanks.
Ragesh Mr Says:
November 23rd, 2011 at 1:02 am

Wow!! Great.. Thanks
Phil Says:
November 24th, 2011 at 1:58 pm

Thanks!
shyne Says:
November 27th, 2011 at 8:16 am

Thanks, this helped me
Shiv Says:
November 28th, 2011 at 12:48 pm

Thanks a ton !!! Your post helped me resolve same issue after spending an hour .. Thanks again,
Shiv
Carla Says:
November 30th, 2011 at 7:32 am

Wow! funciona :O
IE Filter Bug When Using Creating CSS3 Gradients | Brenelz Web Design Solutions Says:
November 30th, 2011 at 12:20 pm

[...] you figure out how to fix an annoying little ie bug. If you haven’t already checked out my ie z-index bug page, do it now.The ProblemMost of you by now I am guessing have started to implement CSS3 [...]
Wayne Says:
December 1st, 2011 at 9:15 am

Cheers. Thanks for posting!
Frank Meijer Says:
December 1st, 2011 at 8:22 pm

Thanks so much. This fixed the problem for me!
Max Says:
December 6th, 2011 at 6:16 pm

I ended up using a _position:absolute style on the tag that held the image i wanted z-indexed relatively. works for IE and is not used by everyone else due to the leading underscore.
notor Says:
December 10th, 2011 at 5:06 am

I suggest you read this article:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

It’s a smart workaround to fix this IE7 bug of messing z-index of different element.
Alexander Says:
December 16th, 2011 at 2:34 am

Worked for me! Thx
riebalm Says:
December 30th, 2011 at 2:05 am

Thank you so much!
This saves me a lot of time!
edinson Says:
January 10th, 2012 at 11:54 pm

muchas Gracias
tiran Says:
January 19th, 2012 at 12:05 am

your trick works nicely dude. thanks for sharing….
Loop Says:
January 19th, 2012 at 9:53 am

Man, I fought this so hard in IE7… I tried every z-index trick I could think of – except this. THANK YOU!!!!
Guillaume Says:
January 21st, 2012 at 11:38 am

We are now in 2012, and we still have to look at hacks for that stupid ie7, anyways, thank so much for this old trick.
Kate Says:
January 23rd, 2012 at 2:58 pm

Lardlad’s post from 4/15/11 clarified this for my particular situation. Thanks to the both of you.
seo Says:
January 31st, 2012 at 12:16 pm

This website won’t render properly on my iphone 3gs – you may want to try and repair that
Mart5210 Says:
February 2nd, 2012 at 12:52 pm

you are an absolute life saver. Or do I mean sanity saver. Many thanks.
sankha Says:
February 9th, 2012 at 12:42 am

Thank you..
Shalmali Says:
February 21st, 2012 at 6:41 pm

SteveG’s solution worked for me! Giving the lower layer div a z-index of -1. Thanks a bunch!
spletniagent Says:
February 22nd, 2012 at 8:41 am

IE sucks

thank you . ..
online recruitment Says:
February 28th, 2012 at 11:05 am

man, thanks for this, I was ripping my hair out, trying to change loads of z-indices, but your tip worked a treat.
Maozilla Says:
February 29th, 2012 at 7:01 am

Grazie mille funziona alla grande!!!!!!

thk
Common CSS Issues in IE | Stone Designs Says:
March 9th, 2012 at 2:22 pm

[...] IE, you have to give the parent element a higher z-index as crazy as that sounds. YAY IE! You can read more about this bug here. Posted on March 9, 2012 [...]
Jobs in Crawley Says:
March 16th, 2012 at 10:24 am

thanks for this! such a simple fix but i have been trying to fix this in IE for days!
Joe Says:
March 19th, 2012 at 11:01 am

Saved me some grief. Thank you!
Vladimir Says:
March 23rd, 2012 at 5:06 am

I think that is one and only solution for this problem.
Thank you !!!
Steven Says:
March 29th, 2012 at 11:42 am

Simple, elegant, and fast! Thank you for saving me the hour or so I would have spent trying to squish this bug!
Mohit Says:
April 1st, 2012 at 3:54 am

Hi,

Thanks very much for the tutorial. It looks a great solution as working for many people. I am also facing the same problem. I am using a css3 multilevel navigation bar but the submenus are hidden behind the body part in IE8. I tried changing the z-index but couldn’t succeed. In my blog template I found z-index at following places-

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index:1;

height: 276px;
width: 100%;

background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

AND

ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
padding:1px 1px 1px 0;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
*display:inline;}
ul#css3menu1>li{
margin:0 0 0 1px;}

Kindly tell me which z-index values to be changed to what so that I can fix the problem.

Thanks
Jacques Says:
April 4th, 2012 at 4:09 pm

Thanks you!
Sam Says:
April 9th, 2012 at 6:41 pm

Thanks for that! Can’t believe how much IE sucks!
Oyvind Kvalnes Says:
April 11th, 2012 at 2:44 am

Thank you!
Nick Says:
April 11th, 2012 at 3:52 pm

I was ready to throw my computer out the window with frustration after spending HOURS on this problem but your solution worked. I’d hug ya if I could! Thank you very much!
Jan Malin Says:
April 17th, 2012 at 5:39 am

Well done. Great tip.
Frato Says:
April 17th, 2012 at 3:54 pm

Thanks, I can now go to sleep, you saved me a few hours of madness !
Been Says:
April 19th, 2012 at 7:32 pm

Thanks for nice trick! Good job!
Yas Says:
April 24th, 2012 at 12:08 pm

Thanks saved my time
Asya Says:
May 21st, 2012 at 6:55 am

Thanks a lot! Great job!:)
Chad Says:
May 30th, 2012 at 1:05 pm

THANK YOU SOOOO MUCH FOR POSTING THIS! I fought this issue for hours!
Sri Says:
May 31st, 2012 at 2:36 am

Great Help! Works just fine!
kamaraj Says:
June 2nd, 2012 at 11:54 am

Thank you!
Jette Says:
June 6th, 2012 at 2:53 am

Thank you so much for posting this article. This just made me solve a bug in 5 minutes. You made my day!
Leo Says:
June 13th, 2012 at 5:28 pm

Great! It bothered me such a long time. Many thanks!
MK Says:
June 20th, 2012 at 10:48 pm

Thanks a lot ! really helps with solving cross-browser issues.. Thanks again !
Fabiano Says:
June 29th, 2012 at 6:47 am

I never more go spend hours with this shit of IE7. Really thanks man.
css Problem u IE7 prozirnost Says:
July 11th, 2012 at 1:02 pm

[...] [...]
gilbertdelyon Says:
July 15th, 2012 at 2:09 am

Thanks a lot Brenelz,
You save my day.
David Says:
August 21st, 2012 at 2:51 am

Thank you man! this works in IE7 and 8(did not test 6, I really don’t care about 6…)
sherry Says:
August 21st, 2012 at 5:33 am

thnxxxxxxxxxxxxxxxxxxxxx buddy……thnxx alooottttt !!!
Nik Says:
August 22nd, 2012 at 4:29 am

Nice one! Thank you.
Ali Says:
September 6th, 2012 at 1:22 am

Awesome… thanks a lot.
Jim Says:
September 8th, 2012 at 10:35 am

Thanks… nice quick easy fix.
Todd Says:
September 12th, 2012 at 9:43 pm

That is the most concise and useful post I have read in a while. Total lifesaver!!
HeadBanger Says:
September 22nd, 2012 at 3:02 am

Thanks, so much for this, this really saved my but on holidays and came across this as a problem. Thanks so much for sharing!!
Bogdan Mirea Says:
September 23rd, 2012 at 10:57 pm

Thanks a lot !!
parvez Says:
October 1st, 2012 at 5:36 am

Thanks buddy..!! its working
Browser Compatibility Issues – Part IV | joeSaad Says:
October 5th, 2012 at 3:36 pm

[...] going over many forums to see how to have it solved. One of the forums exceptionally useful is: Squish the Internet Explorer Z-Index Bug which actually discussed the problem I was having at that time. I know there are more issues to [...]
Thunder Says:
October 15th, 2012 at 10:29 pm

AWSOME..FRM ALL THE FORUMS I WENT U GAVE ME THE BEST SOLUTION..GR88 GOIN…U R GENIUS…
Indira Says:
October 17th, 2012 at 1:01 pm

Thanks a lot for this, you saved me a lot of time!!!!!!
anil Says:
February 5th, 2013 at 6:30 am

Thanks a lot…
it worked for me…
Lesha Says:
March 4th, 2013 at 12:58 pm

Jesus, thanks man!
Dante Says:
March 17th, 2013 at 7:20 pm

Incredible, it works! Thank you very much!
awan Says:
March 22nd, 2013 at 6:31 pm

thanks for trick , i was hacks IE now thank you
sw3b Says:
April 24th, 2013 at 12:37 pm

Great solution here ! Thanks a lot…
Lisa Says:
May 7th, 2013 at 4:23 pm

thank you! it’s still fixing the issue