CSS: Z-Index and Internet Explorer

If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.

The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!

Thanks for wasting several hours of mine IE.

See here and here for others with this problem!

Join

other readers by subscribing to my RSS feed!

Short URL: http://sysbash.com/3h Last updated: June 14th, 2007

Ken

Thanks man! Just ran into this a couple of days ago and couldn’t figure it out.
Ken

Thanks man! Just ran into this a couple of days ago and couldn’t figure it out.
Mattapus

Ah man, you’re a lifesaver! Thanks for the tip!
Mattapus

Ah man, you’re a lifesaver! Thanks for the tip!
Lasitha

OH thx buddy… it working…
u r great. no words to express ma feelings.
thanx buddy.
keep it up. u guys help alot… max…
Lasitha

OH thx buddy… it working…
u r great. no words to express ma feelings.
thanx buddy.
keep it up. u guys help alot… max…
Liran Cohen

AHHHHHHHHHH

I cant believe those ****** MS!!!
I just cant believe the time I wasted on this issue!!! and the money I lost due to this ****** bug!!! if its thats common why dont they fix it?!?!?!?

Thanks man , you just helped me finish the week at ease :)
Liran Cohen

AHHHHHHHHHH

I cant believe those ****** MS!!!
I just cant believe the time I wasted on this issue!!! and the money I lost due to this ****** bug!!! if its thats common why dont they fix it?!?!?!?

Thanks man , you just helped me finish the week at ease :)
Jonathan

Thanks, you saved me a lot of time :D
Jonathan

Thanks, you saved me a lot of time :D
My solution

I’ve been making a pop-up box sytem for positioned boxes (rendering a map). Your fix didn’t work for my (actually I’d already added a relative position).

However, by looking at the links you provided I found out that an element “A1″ with ie. z-index 3 will go below an element “B1″ with z-index 2 if it’s inside an element “A2″ with z-index lower than 2.

I fixed my problem by setting a class for A2 and making a style for this class which made the z-index value high while hovering A2.
My solution

I’ve been making a pop-up box sytem for positioned boxes (rendering a map). Your fix didn’t work for my (actually I’d already added a relative position).

However, by looking at the links you provided I found out that an element “A1″ with ie. z-index 3 will go below an element “B1″ with z-index 2 if it’s inside an element “A2″ with z-index lower than 2.

I fixed my problem by setting a class for A2 and making a style for this class which made the z-index value high while hovering A2.
Fredrik

Thank you My solution!

I had a div with position absolute and a high z-index, placed in a div with relative position and no z-index and the absolutely positioned one ended up under lots of other elements with no z-index.

By just adding z-index 1 to my relative div it solved the problem.
Fredrik

Thank you My solution!

I had a div with position absolute and a high z-index, placed in a div with relative position and no z-index and the absolutely positioned one ended up under lots of other elements with no z-index.

By just adding z-index 1 to my relative div it solved the problem.
Pingback: ahujaankit
Pingback: Syd