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