DIV 没有按预期排列答案

【问题标题】：DIV's not lining up as intendedDIV 没有按预期排列
【发布时间】：2013-06-07 03:47:52
【问题描述】：

我一共有三个 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

我哪里出错了？感谢您的帮助！

【问题讨论】：

您使用的图像未显示。我不知道浏览器是否甚至显示 tif 文件。
网络浏览器无法显示 tif 文件。
tiffs 只是为这个例子剪裁
例子改为jpg
可以用position: relative;和top: -20px;定位红色框，使其与浅绿色框重叠。

标签： html css

【解决方案1】：

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/

【讨论】：

为什么在这种情况下使用 pt 单位？请解释。 :x（无冒犯）
一个点 (pt) 在每个屏幕上的大小相同（1/72 英寸）。另一方面，像素 (px) 大小随屏幕密度而变化。更多详情请查看以下内容：stackoverflow.com/questions/3557260/css-newbie-pt-or-px

【解决方案2】：

<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/

【讨论】：