4 replies [Last post]
johanna0507
johanna0507's picture
Offline
Enthusiast
South West London, United Kingdom
Last seen: 13 years 45 weeks ago
South West London, United Kingdom
Joined: 2006-11-22
Posts: 60
Points: 0

Z-values are treated differently between IE7 and FF!

Abolutely positioned Divs with a high z-value are obscured by Relatively positioned divs!

Is this a bug or a feature? Any tips for workarounds?

...and yes, my site validates, so it is not a matter of funny code on my site... ! Wink

Jo

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Not a solution

Not a solution, but here's confirmation:
http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html

I've read of javascript hacks to correct the problem, but have never tried them.
Also, this might be of interest:
http://digitalemagine.com/wordpress/archives/6

johanna0507
johanna0507's picture
Offline
Enthusiast
South West London, United Kingdom
Last seen: 13 years 45 weeks ago
South West London, United Kingdom
Joined: 2006-11-22
Posts: 60
Points: 0

Thanks for the feedback! I

Thanks for the feedback! I followed the links that you posted.

One of the solutions involves placing the absolutely positioned div in a relatively positioned div... (adding more divs.... sigh.... )

That solves the problem if the absolutely positioned div is acting as if it has a higher z index than it really has, and is placed OVER divs that are declared later in the script.

This solves 50% of my problems with z-values. I'll get back if I can solve the rest!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's always been one of

It's always been one of those little quirks that isn't often a problem but when it is....

Many fall foul of this in using position relative in the belief that elements Must always be positioned in some way .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ah z-index ! You should be

Ah z-index !

You should be able to search and find quite a few posts on the topic at these forums.

Basically...
- for IE, you need to work back and place the z-index (along with position:relative to trigger it) at a level where the elements receiving the z-index are siblings. As link indicates, IE designers chose to create a new stacking context for position:relative when no z-index is specified, which is not as its specified in the CSS standard.
- for FF, the background root element in the stacking context is not placed behind all of its child elements and its own foreground as is specified in the CSS standard. So becareful if you ever use negative z-index values.