Accessibility

CSS Advisor

z-index bug

by CSSAdvisorAdmin on November 1, 2006
Edited by: LoriHC (Dreamweaver Team) on November 24, 2009 Avg Rating 2.4 (7)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , Position , Explorer 7.0 , Explorer 5.5 , Explorer for Mac

Problem

Positioned containers define a new stacking order in IE, even when the computed z-index of the container is auto.

Solution

No standard method, outside explicitly-setting z-index properties on all positioned elements.

Detailed description

CSS specs specify that only positioned elements with a computed z-index value other than 'auto' should generate a new stacking context.

However, in affected versions of Internet Explorer/Windows, positioned elements still generate a new stacking context, starting with a '0' (zero) z-index value.

Originally reported by crisp (Read original article).

Additional context is also available by way of 'aplus' in his article here.




Tagged with Explorer 6.0 , Explorer 5.0 , Position , Explorer 7.0 , Explorer 5.5 , Explorer for Mac

Tag it on del.icio.us or Digg

Text ID: ZINDEX_BUG


Comments (7)

To add a comment, please Log in.




RE: One Solution for z-index bug

by zynthLemon on May 31, 2009

->artbuilders
Your method worked great.  Just give a z-index to the parent tag of the offending object, and eliminate the z-index on the offending object.  Nice and clean...problem solved.

One Solution for z-index bug

by artbuilders on April 18, 2009

I had an AJAX-driven sliding box in the header with Flash in the main content section below. To allow the sliding box to appear on top of the Flash, I added "wmode, opaque" to the embed code. However, because the slider's containing DIV (id="slider") had a position of "absolute", the z-index bug appeared in IE causing slider to be hidden behind the main content section below. Setting the "slider" DIV to a higher z-index than the content DIV failed to solve the problem. The solution was to instead add the z-index value to the "slider" DIV's parent. In this case it was the header itself. No other z-indexes needed to be specified. Problem solved.

http://artbuilders.com/sample/

Also affects IE8

by epcrowe on April 9, 2009

How do you set Z values?

only have the css z-index bug in ie6 not on ie7 or others

by Harold Vergucht on February 20, 2009

I have a logo wich I have positioned absolute on top , true z-index 10.
Works in every browser except ie6 (why I am not surprised ;)
Any one?

Wow... but what to do next?

by BlandyDoes on February 8, 2009

Ok I understand what is being said here but without a solution how am I meant to solve the bug problem?

The site seems to work fine in IE and Firefox so do I need to worry about this?

http://www.blandydoes.co.uk/bdprojects/thercshed/

Need more explanation in overcoming Z-INDEX BUG IN IE

by evaNonsense on August 10, 2008

Does it mean that all elements which have the attibute "position" - whatever value it has - a z-index should be specified in order to avoid the z-index bug in IE.  Is this what this post is trying to say?

It's so helpfull

by fredericomottinha on November 29, 2007

Thanks, this way solve my problem with IE.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (45)
Mozilla/Firefox (16)
Opera (7)
Safari (13)
CSS Properties
Background (6)
Border (3)
Color (1)
Float (15)
Font (1)
Margin (6)
Padding (4)
Position (15)
Text (13)
Width/Height (9)