multiple relative positions and IE

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>