Hi All

I've been struggling with a conflict between an absolutely positioned drop
down list with z-index and the objects that follow it in the page.
After doing a lot of testing and searching for information, I've been able
to solve some of the issues.  I've got a couple blog posts on
www.last-child.com about the issue. 

I thought I'd share the summary for those interested or have been having the
same issue. .

Conflicting Z-Index in IE6

Internet Explorer 6 has an issue with positioned elements that use z-index.
Here's the trouble I just had with this:

I have a topnav consisting of an unordered list with a dropdown menu on one
of the list elements. The dropdown is a nested unordered list with
position:absolute and a z-index to sit on top of any page content below.

Fairly simple so far.

However, in IE6, the menu is obscured by an h5, random images, and
paragraphs on various pages. The z-index should make this list float on top
of other elements, but it seems to be ineffective.

PPK (http://www.quirksmode.org/) summarized this problem on his post:
Explorer z-index bug

It appears that in Internet Explorer (windows) positioned elements do
generate a new stacking context, starting with a z-index value of 0, causing
the lime-green box to appear above the yellow box.
This is a serious violation of the CSS specifications, causing headages and
a lot of misunderstanding of what z-index really does.

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn't
mention Aleksandar's simple solution. Give the parent a position:relative
and z-index:1..( http://www.aplus.co.yu/css/z-pos/)

Now, of course it isn't always that simple. There's also the issue of
subsequent objects that also have a z-index and what happens if their parent
is also positioned with a z-index. Please take some time to visit
Aleksandar's web site if you are having this conflict.

IE7 and more fun

According to PPK's web site, this has not been fixed in IE7 Beta2Preview.
We'll see how this works out. I've noticed some positioning bugs in IE7
myself. This is something to consider when considering the z-index happiness
of Andy Clarke

More solutions

Hedger Wang (http://www.hedgerwow.com/360/bugs/css-select-free.html ) has an
ingenious solution to the conflict between z-index on elements and
subsequent select elements. He uses an iframe with z-index-1 that sits under
the targeted element. 

I've used this negative z-index on some of the subsequent elements and it is
helping. Fixing all of the pages will be a long journey, but at least there
is light at the end of the tunnel. 

Ted Drake
Front-end Engineer
Yahoo! Tech

The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help

Reply via email to