multiple position relatives in IE

[jonniejoejonson]

The following should produce a green square over the top of both a yellow stripe and an orange stripe.

Please note this is not my actual problem but it is the principal cause of the problem i am having.

 

In explorer the green square is positioned under the orange stripe.. this should not be so.. any ideas why?.. if i remove the position relative from the orange stripe it works... however i need the orange stripe to be position relative.... any ideas...

 

Just saying Explorer is *beep* is not an acceptable answer!! even though it may be correct...

 

<div style="position:relative; float:left; width:100%; height:100px; background:yellow;">
<div style="position:absolute; z-index:1000000; top:0; left:0; width:250px; height:250px; background:green;"></div>
</div>

<div style="position:relative; float:left; width:100%; height:100px; background:orange;">
</div>

[jonniejoejonson]

answer you z-index on the relative positioned divs. well done me.

[haku]

Internet explorer (you didn't mention which version by the way) has issues with the z-index. You have set the z-index on the child element (green), but the parent element (yellow) has the same z-index as it's sibling (orange). Since the sibling (orange) is later in the document, it takes a higher precedence than the element before it. As the parent (yellow) is relatively positioned, The z-index on the child (green) is only relevant to it's own siblings (siblings of the green, if any existed).

 

The secret is to set a z-index of one on the parent (yellow) element.