Position: relative appearance over position: absolute

Question

I have a strange problem in IE7. In some cases, I have a DIV that has a position: absolute on it (false drop-down list), when there is something behind that has a position: the relative relative positional element will be displayed through another div.

An element with a relative position has no z-index set, while an absolutely positioned element (the one I want on top) has a z-index of 1000.

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

Answer 1

I suspect you have already tried, but set the z-index to your relatively positioned element, which is lower than your absolutely positioned z-index element as the first test.

If this does not work, you need to make sure that both elements are in the same stacking context . In IE, whenever you apply a CSS position rule to an element, it generates a new stacking context inside that element. This means that the z-index will be respected only within this element. Children and children in other stacking contexts with lower z-indices may still be higher.

In your case, you need to either put a drop-down list or a button in the same stacking context or apply z-index to two elements that generate their own separate stacking contexts.