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 (http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug. html): 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 ******************************************************
