Question

我总共有三个div。两个背景div，彼此叠加，一个用于内容，位于下div。我的问题是我正在尝试使用内容来覆盖背景div，所以我给它一个-20px的上边距。它在Dreamweaver中给出了正确的结果，但是一旦我在Safari中打开它，内容div就会用它来拉低背景div。

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-  color:#CF3; margin-top:100px;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF;">
    <div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px;"></div>
</div>

这就是我的目的： Pic of what I want http://www.snapfoot.com/audio/good.jpg

我不想要但我得到的东西。我需要蓝色的一个留下来，而不是红色。 Pic of what I don't want http://www.snapfoot.com/audio/bad.jpg

我哪里错了？谢谢你的帮助！

Answer 1

<div style="height:40px; width:500px; margin-left:auto; margin-right:auto; background-color:#CF3; margin-top:100px;"></div>
<div style="height:80px; width:300px; margin-left:auto; margin-right:auto; background-color: #F00; margin-top:-20px; position: relative; z-index: 9999;"></div>
<div style="height:100px; width:400px; margin-left:auto; margin-right:auto; background-color: #0FF; margin-top: -60px;">
</div>

这是你想要做的吗？

这是一个小提琴：http://jsfiddle.net/TzK6a/1/

Answer 2

HTML

<div id="backgroundTop" class="center">
    <div id="content" class="center"></div>
</div>
<div id="backgroundBottom" class="center"></div>

通过将#content div放在#backgroundTop内，您可以将内容相对的上边距定义为背景div。这是使用CSS完成的（见下文）。

CSS

#backgroundTop
{
    height:40px;
    width:500px;
    background-color:#CF3;
}

#backgroundBottom
{
    height:100px;
    width:400px;
    background-color: #0FF;
}

#content
{
    /*Here's the magic*/
    position: relative;
    top: 15pt;
    /******************/
    height:80px;
    width:300px;
    background-color: #F00;
}

.center
{
    margin: 0 auto;
}

小提琴： http://jsfiddle.net/yBq2V/1/

DIV没有按预期排队

2 个答案: