CODEWITHSUNDEEP
css
Louis W
Louis W

Reputation: 3252

position: relative appearing over position:absolute

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

Upvotes: 11

Views: 29733

Answers (1)

Pat
Pat

Reputation: 25675

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.

Upvotes: 37

Related Questions