UPDATE!
建议的答案是不正确的,我的错误.#container DIV应该有"float:left;".请验证Firefox和IE7中的HTML.你可以看到差异!
我不能让一个DIV嵌套使用的z-index显示上方的较高层次的嵌套DIV ...叠加保持在铺设即使底部嵌套DIV具有较高的z-index较低DIV嵌套...这是甚至可能在IE7中？
以下显示Firefox中绿色#overlay上方的蓝色#details,但在IE7中,蓝色#details位于绿色#overlay下方
UPDATE2:价格 :添加"z-index:99;" #container样式使得类.item div出现(在Firefox中,IE搞砸了:无论如何都不能正确显示),而它们应该在叠加下!如果没有#container z-index设置,它会在Firefox中正确显示,但不能在IE中显示....
<html>
<body>
<style type="text/css">
.item {
float:left;width:75px;height:75px;background-color:red;
}
</style>
<div id="main" style="position:relative;">
<!-- this one should overlay everything, except #details -->
<div id="overlay" style="position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
z-index:1;
background-color:green;"></div>
<div id="container" style="position:relative;float:left;">
<!-- these ones should display UNDER the overlay: so NOT visible -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- this one should display above the overlay -->
<div id="details" style="position:absolute;
width:200px;
height:200px;
background-color:blue;
left:400px;
z-index:99;"></div>
</div>
</div>
</body>
</html>
