tags:

views:

32

answers:

1

Having a strange issue in IE7. In a number of spots, I have a DIV which has position: absolute on it (faux dropdown) whenever there is something behind it which has position: relative the relative positioned item will show through the other div.

Relativly positioned item does not have any z-index set, while the absolutely positioned item (the one I want on top) has a z-index of 1000.

http://skitch.com/louiswalch/dub5h/microsoft-windows-vista

+1  A: 

I suspect you've already tried it, but set a z-index on your relatively positioned element that's lower than your absolutely positioned element's z-index as the first test.

If that doesn't work, you need to make sure both elements are in the same stacking context. In IE, whenever you apply the position CSS rule to an element, it generates a new stacking context within that element. That means that z-index will only be properly respected within that element's children and children in other stacking contexts with lower z-indexes may still stack above.

In your case, you either need to put the dropdown and button in the same stacking context or apply z-index to the 2 elements that are generating their separate stacking contexts.

Pat
Ahh spot on, that's the problem. Problem is I'm not sure I can put them in the same stacking index. It's happening on another place on the site which has a more complex layout and the element with relative positioning is in a total different level of the DOM. I tried giving the item which is popping through a z-index lower then the item above it and it still shows though. what does "or apply z-index to the 2 elements that are generating their separate stacking contexts. " mean?
Louis W
What I mean is that you have to find the 2 parent elements with a `position` set (these are creating the 2 separate stacking contexts) and set `z-index` on them. For example if your button is nested in a container called `#content` and your dropdown is in `#header`, you could set `#content { z-index: 1 } and `#header { z-index: 2 }`. Provided `#header` and `#content` are in the same stacking context, this will fix your problem.
Pat
Thanks for the help!
Louis W