Question

说我有以下结构：

<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和其余来自“底部”的一个）？

Answer 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示例。

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

Answer 3

您可以设置负上边距：

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

Answer 4

分享颜色是什么意思？如果您要组合颜色，则需要使用RGB

的背景颜色的RGBA值

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

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

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

4 个答案: