thanks for that, worked a treat. not to say i don't still HATE internet explorer.

Thanks a lot, actually... spent about five hours fighting with my javascript till i found out this bug, and its not the first time that IE, and more often IE7 spoils my day of work.
The question of the day: If they are not good enought to develop a browser why do they keep stealing our time and killing our nerves?
Thank you very much for the tip, it solved half of my prob with IE7 today :)

Thanks all you guys. Especially to Moune.
It seems we also need to add the parent div z-index value.
after I adding the z-index value in the parent div.
It works!

Thank you very much! This old post has its everlasting value.

works great! thanks!

Thank you so much for this, it worked like a charm!

I only wish that I'd found this earlier, I've been trying to work out whats going on for days! :$

Thanks again!

Uow! That was great!
But I did by using "z-index: -1" =s

Anyway, a thousand thanks!!!!! =DDD

Thanks for sharing your solution. I went with Anonymous/Moune's suggestion to set the parent element z-index larger and it fixed my problem.

What a major pain! :)

If some one feels up to the challenge, can you take a look at my home page in IE7 or ie8 compatibility mode and hover over the 'f1 tickets' link at the top of the page - notice it goes behind the fading images?

ive looked at every page on google about z-index in ie7 and cant fix this problem!!!

the fading images are jquery powered and if u look in firebug u'll see zindexes 1-5 are placed on the images as they fade in and out

if anyone can suss it out please hit the CONTACT US button on the site and get in touch - its worth a link to a site of your choice and a public thanks!!!

It works with a Jquery slider bug ;)

Thank you very much!

Did from Belgium

It's only working halfway for me <.<
I have an object position:absolute; that needs to be behind some stuff.. and it is... some of the places... other places it is behind the header as it should but on top of the main content which is not what i want <.<
but it's only two places on the site.. i've left the object off until i get this sorted out on my local server, but i dunno what to try out anymore, i feel like i tried everything you guys have said and then some x.x
Ah well.. the search must go on...

The negative values work great!

IE7 didn't do what I wanted with postive values but with the negative it did!

If you have problems about absolute positioned divs inside a relative div, set the parent div's z-index value greater as mentioned above. Try negative values if you still have problems.

.topdiv {
position:relative;
z-index:-1000;
}

.childdiv {
position:absolute;
z-index:-999;
}

if you set a z-index to the parent element greater than the child element(s), z-index start to work as expected. don't ask...

body {
z-index:30000;
}

OMG - This worked like a charm! It appears the position of relative fixes a lot of IE issues. Thanks.

Just to clear a few things up:

1) in the W3 spec, z-index requires position on an element to be fixed, relative or absolute. Browsers which are following a z-index instruction without a position are likely to be in quirks mode.

2) IE7 has an known issue with z-indexes. Elements which come later in the body will be given a higher z-index than those before it - regardless of their Z-indexes

Thanks for this blog! It ended hours of frustration for me!

Hi Shawn,

I am trying get a drop down menu working. It works in FF and in Opera, but IE [7] is giving me a hard time.

I gave the nested ul a top and left value with the absolute position but the z-index doesn't work.

It drives me nuts!!!

Thanks a lot in advance for any advice.

Babi

That is just awesome. Thanks so much for the help.

Thanks a lot,
This bug drove me crazy.

Have a great life, thanks for sharing.

God Bless!

Man, thanks a lot

Man you saved my day! Thank you so much!

Thanx man!!! Your post helped me a lot! I spend about one hour thinking what's going on!!!! But the solution was pretty easy!

What if you want to put a z-index on an object with position:absolute? That works in FF but not in IE7..., the containing div is set to position:relative...

That's not a trick... it's a w3c requirement for setting z-index. You need to set a position as well.. whether it be relative, absolute, static... it doesn't matter. It's one of the few things IE does right and FF does wrong.

works like a charm! thanks man

you will need a hack or some kind for this as it seems to work for ie7 but will break other browser layout.

Thank you very much for that tip, Shawn!