一个 div 的内容与另一个 div 的内容重叠答案

【问题标题】：Content of one div to overlap content of another一个 div 的内容与另一个 div 的内容重叠
【发布时间】：2012-03-08 07:40:20
【问题描述】：

假设我有以下结构：

<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 为“overlapingDiv”的 div 从“bottom”div 20px 中出来并与“top”重叠，以便共享“top”和“bottom”div 的背景颜色（20px 从“顶部” div 和“底部” 的其余部分）？

【问题讨论】：

标签： css html

【解决方案1】：

您可以浮动overlapingDiv，然后给它一个负边距，例如

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

查看此jsFiddle 示例。

【讨论】：

【解决方案2】：

你的意思是这样吗？ http://jsfiddle.net/SXRYy/

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

【讨论】：

【解决方案3】：

您可以设置负上边距：

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

【讨论】：

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

【解决方案4】：

分享颜色是什么意思？如果您要组合颜色，则需要使用 RGBA 值作为背景颜色和 CSS

现在，重叠 div 有不同的技术。您可以使用位置：相对您可以使用负边距您可以使用绝对位置，这取决于您要实现的目标。

这是一个 jsfiddle，两个重叠的 div 合并颜色，看看它是否适合你： http://jsfiddle.net/8Fnxc/

【讨论】：