css

z-index in Internet Explorer 7 (IE7)

This 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!

position always must be given

Generally the z-index property does not work without position set to either absolute or relative. Sorry if that sounds cocky, but setting position: relative is not a "z-index problem"-resolver, but a predefined requirement for getting z-indexes applied ^^.

wow

man is IE7 ancient

Thanks!

Works like a charm. I don't often support IE7 any more, but on the rare occasion that I need to, I turn to Google before spending hours pulling my hair out and this post is the reason why. Thanks!

That is not really a bug

That is not really a bug because you need to position your elements to apply a z-index...if position = static (default) the z-index cannot work... A real bug is when you give the position(relative for example) and the z-index does not work anyway

Awesome..

...that is what you are. Such an easy fix but so hard to find.

Thank you very much for posting this!

thank you

the fix worked. i just had to find the correct container and make it "relative"

mythical!

works great!!!
mythical
many thanks
by Altravista

Wow...you're the best!

Wow...you're the best! worked! Brazilian kisses for you - thank you soooooooooo much!

XD

Not getting the fix

Hi,
Am having same problem in IE7 and even this fix doesn't work. Any help?
Here's the website link >> http://www.presentafrica.com/ (check directory link)

Of Course!

Jeez, you make it sound so simple!

Had this issue ages ago but couldn;t remember how I'd got round it. Google lead me here and I remembered I'd found the answer on here originally! Thank god for stable SERPS eh?

@D Jackson RE: IE7 known issue...

I think all issues and bugs are known as "Features" in IE ;)

"Thank god for stable SERPS eh?"

I can tell you how many times I have thanked the SERPS for tips similar to this on. Glad so many find this solutions so useful!

Thank you thank you thank you!!!

Your tip worked! I can stop tearing my hair out now. Thank you so much!

Z-Index in garbage IE7

Mannn, veery thanks :DDD

Mannn, very welcome :p

Mannn, very welcome :p

Thanks

Thanks.... IE sucks really...
but a GREAT THANKS to this...

THANKS!!! You dont know how

THANKS!!! You dont know how much this has helped!! Even today people are hell bent on using IE 7...

Thank you bro :-)

thanks guys but I got to do

thanks guys but I got to do something like below -

...some contetnt here...

I am setting the div visible on click of some link and both these divs are inside table-tr-td.So when set visible its just appears some part of my popup div box as par the td's width and rest of the part gets chopped off. I am not sure where it goes :)
Any suggestion?

pritam m

Thanks, it helped me!

Thanks, it helped me!

thanks!!!!!!!!!!!!!!!!

thanks!!!!!!!!!!!!!!!!

Thanks

You're the man, thanks.

Well I had an odity similar

Well I had an odity similar to this, but it wasn't the position of the DIV that my image was in that needed a position set (although it does have one) but the DIV of it's parent DIV.

All three have positions set and banner set to z-index to get the image in logo on top.

Thanks you!. It just worked!

Thanks you!. It just worked!

It's not a bug.

As an anonymous user said back in 2008 in this very thread "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"

It's not a bug ffs, if you wan't to set a z-index, the element must have a position attribute.

Yes, however

It should be assumed anyway that it's going to be a positioned element as it defaults back to position: relative.

True, but when people write

True, but when people write stuff using Firefox to test they get sloppy - Firefox is smart enough to get your 'point' even if you didn't follow w3c standards and for the most part IE8 is as well.

It is almost like people need to re-learn the basics when they run into issues with older browsers as they got spoiled with the new fancy versions.

Your are right Jordan, the

Your are right Jordan, the note on w3c specifically says "Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)." on this page: http://www.w3schools.com/Css/pr_pos_z-index.asp. Thanks for pointing that out!

thanks,it is very helpful

thanks,it is very helpful

thanks for that, worked a

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

Sad but true...

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.

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 SO MUCH, MAN

God bless you, man. i was spending hours and hours to figure it out. When i did what you pfrefered in your comment ....... and it works. i feel great. THANK you once again!!!GJ

Thank you very much! This old

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

quick fix

works great! thanks!

Thank You!

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!

Z-index!

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

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

Setting z-index on the parent element

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

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!!!

Thanks

It works with a Jquery slider bug ;)

Thank you very much!

Did from Belgium

z-index

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...

Z-index

The negative values work great!

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

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;
}

Thanks

Thanks man, for me the best solution because I've got an absolute positioned div.
Thanks to all

Grd!

i stopped crying after seeing your tips!
Its great to me,Thank you

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;
}

Thanks man!!!! Just GREAT it

Thanks man!!!!
Just GREAT it works fine for me, God Bless you mate!

THANKS!

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

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

2) IE7 has an known issue

2) IE7 has an known issue .... :( Having this issue and working in drupal ... any solution to get rid of this ?

Hallelujah!

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

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

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
By submitting this form, you accept the Mollom privacy policy.