z-index in Internet Explorer 7 (IE7)
Posted August 27th, 2007 by spreiszThis is going to be a short, but sweet blog post that I thought everyone should know. Have you ever run into a problem where IE7 just won't listen to a style where you are trying to change the z-index of an image or list item?
Well try this quick fix.
If you are targeting an element like the following example:
#page ul li.button {
z-index:4;
}
And you are not getting the results you expect in IE7 try adding the position:relative; to the element. 9 times out of 10 it seems to resolve my z-index problems.
#page ul li.button {
position:relative;
z-index:4;
}
Happy styling!
Thank you!
Thank you very much for that tip, Shawn!
with ff and others
you will need a hack or some kind for this as it seems to work for ie7 but will break other browser layout.
yes!
works like a charm! thanks man
that's not a trick
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.
perhaps but...
I've never had this problem before, but this was actually required for me while testing in the latest FF 3.0.10
Perhaps they fixed it in the latest update for FF, so it now plays by the rules.
position:absolute?
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...
Thanx man!!! Your post
Thanx man!!! Your post helped me a lot! I spend about one hour thinking what's going on!!!! But the solution was pretty easy!
Man you saved my day! Thank
Man you saved my day! Thank you so much!
Perfect
Man, thanks a lot
THANk You!
Have a great life, thanks for sharing.
God Bless!
Thanks a lot, This bug drove
Thanks a lot,
This bug drove me crazy.
Brilliant
That is just awesome. Thanks so much for the help.
Still doesn't work
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
Hallelujah!
Thanks for this blog! It ended hours of frustration for me!
Just to clear a few things
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!
OMG - This worked like a charm! It appears the position of relative fixes a lot of IE issues. Thanks.
if you set a z-index to the
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;
}
Z-index for absolute positioned divs
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;
}
Z-index
The negative values work great!
IE7 didn't do what I wanted with postive values but with the negative it did!
Post new comment