Question

In IE7 browser, I just meet one issue about position.
I made a demo page to test the position conditions of relative and absolute.
There are the related codes below:

[CSS]

.rela{
    width:200px;
    height:100px;
    background:#EEE;
    margin-bottom:10px;
    position:relative;
}
.abs{
    width:50px;
    height:50px;
    position:absolute;
    background:#333;
    left:20px;
    top:80px;
    z-index:10;
}

[HTML]

<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>

Now, the problem is, in IE7 browser, the “abs” element is covered by the next “rela” element, but it displays well in other browsers like Firefox, chrome, IE8.
I know somebody said that we can add a more higher z-index to the parent “rela” element, but for the codes above, the issue can’t be fixed in this condition, coz there are more than two rela elements and all of them have the abs element.

I have no idea about how to fix it now. Also, if someone could kindly provide a official explanation about this “bug”, it will be so good.

Answer 1

The same question was asked here.

Don’t ask me why, but the last answer there seems to fix the problem (though you’ll need jQuery or the like):

http://jsfiddle.net/Xmznn/1/