IE 6/7, positioned boxes, and stacking contexts

The orange box should appear in front of this box

This box should appear in front of the white box

Markup

<div id="teal">
  <div id="white"></div>
</div>
<div id="yellow">
  <div id="orange"></div>
</div>

CSS

div {
  height:200px;
}
#teal {
  background:teal;
  float:left;
  width:50%;
  position:relative;
  z-index:1;
}
#white {
  background:white;
  position:relative;
  top:50%;
  width:80%;
  left:60%;
}
#yellow {
  background:yellow;
  float:right;
  width:50%;
  position:relative; /* this is what establishes a different stacking context in IE 6/7 */
}
#orange {
  background:orange;
  z-index:1;
  position:relative;
  top:50%;
  width:80%;
  right:40%;
}