IE z-index relative/absolute bug in list

Question

I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index prob

Answer 1

Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:

  
b
  
c

 

and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.

So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".

(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)