Relative positioning, div stacking issue in ie 7

This is my example code which is not working as expected in IE7 - I think position:relative; is the issue for IE7

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
  z-index:999;
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
  z-index:999;
}

HTML:

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner">
        <div class="开发者_如何学编程onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

What happens is that the onea div goes behind the following oner div, but in other browsers it overlays it

setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)

I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner" style="z-index: 1;">
        <div class="onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

with this there is no need for the Absolutely Positioned children to have a z-index at all, as those divs now take their "z level" from their relatively positioned parent - IE and the stack can be quite confusing!

CSS:

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
}

However it does mean that if you have more than two as in this example you need to set the levels on all the oner divs with the first one being the highest.. (that's why I put the oner style inline in the HTML if you have more you might need some more classes to separate them)

Since both the inner divs have a zindex of 999 the second should overlay the first, although zindex results can be unpredictable across browsers. Really you should set different zindex values to accurately control depth.