Css 一个div的内容与另一个div的内容重叠

假设我有以下结构：

<div id="top" style="width:960px; height:400px; margin 0 auto; background-color:#F00;">
</div>
<div id="bottom" style="width:960px; height:400px; margin 0 auto; background-color:#00F;">
    <div id="overlapingDiv"> Some large content here ...  </div>
</div>

这里有一些大内容。。。

---

如何使id为“overlappingdiv”的div从“底部”div 20px中出来，并与“顶部”div重叠，使其共享“顶部”和“底部”div的背景色（20px从“顶部”div开始，其余部分从“底部”div开始）？

您可以设置负的顶部边距：

<div id="overlapingDiv" style="margin-top: -20px;"> Some content here ...  </div>

这里有一些内容。。。

您可以浮动

重叠div

，然后给它一个负边距，例如

<div id="top" style="width:960px; height:400px; margin 0 auto; background-color:#F00;">
</div>
<div id="bottom" style="width:960px; height:400px; margin 0 auto; background-color:#00F;">
    <div id="overlapingDiv" style="float:left; margin-top: -20px;"> Some content here ...  </div>
</div>​

这里有一些内容。。。
​

看看这个例子。

你是说像这样

这里有一些内容。。。
​

共享颜色是什么意思？ 如果要组合颜色，则需要将背景颜色的RGBA值与CSS一起使用

现在，有不同的技术来重叠div。 您可以使用position:relative 您可以使用负边距 你可以使用绝对位置，这取决于你想要达到什么

下面是一个JSFIDLE，其中有两个重叠的div合并颜色，看看它是否适合您：

---

谢谢，但上边距也会将“底部”div的上边框向上移动20px，我只想移动“overlappingdiv”@koenp的响应就可以了，您需要在父元素中将位置设置为相对，并在内部元素中使用绝对定位。

<div id="top" style="width:960px; height:400px; margin 0 auto; background-color:#F00;">
</div>
<div id="bottom" style="width:960px; height:400px; margin 0 auto; background-color:#00F;position: relative">
    <div id="overlapingDiv" style="position: absolute;top: -20px"> Some content here ...  </div>
</div>​