IE6中单独容器中两个其他div之间的三明治div答案

【问题标题】：Sandwich div between two other divs in separate container in IE6IE6中单独容器中两个其他div之间的三明治div
【发布时间】：2010-07-08 07:16:14
【问题描述】：

我正在处理一个包含多个图层的棘手设计，它需要我在一个单独的容器中的两个其他重叠 div 之间放置一个 div。这是我的简化示例，它适用于 Firefox，但不适用于 IE6（这当然是客户端选择的浏览器）：http://dawnup.com/sandwich

来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
    div {
        width:200px;
        height:200px;
        position:absolute;
    }

    #middle {
        background-color:#aaa;
        left:30px;
        top:30px;
        z-index:1;
    }
    #bottom {
        height:200px;
        background-color:#777;
        left:0px;
    }
    #top {
        background-color:#ccc;
        left:40px;
        top:40px;
        z-index:2;
    }
</style>

</head>
<body>
    <div id="middle">MIDDLE</div>
    <div id="container">
        <div id="bottom">BOTTOM
            <div id="top">TOP</div>
        </div>
    </div>
</body>
</html>

有什么技巧可以让它在 IE6 中工作？还是这种重叠是不可能的？

提前致谢

【问题讨论】：

标签： html css z-index internet-explorer-6 overlap

【解决方案1】：

为什么不能移动#top 元素使其不在底部？

【讨论】：

所有 div 的位置：绝对。我也尝试过相对，但我得到了相同的结果。
你不能把顶部移到底部之外吗？
您也可以尝试为#bottom 指定低于#top 的显式z-index。