如何在CSS中重叠顶部div标签

Question

请问如何在CSS中实现下图所示的效果：页面底部有一个div，上面有两个重叠的div。请参考以下图片：

- Richard Rodgers

---

有多种方法可以实现这个。你有一个可用的HTML/CSS示例吗？我们可以看一下，以帮助调整你正在做的事情吗？ - Liquidchrome

SO主要是用于解决你编写的代码问题，而不是提供基于所需功能的代码平台。话虽如此，请看一下https://jsfiddle.net/jz6w10a1/，它应该能指引你正确的方向 :) - GillesC

你想让Div#1和Div#2占用div内部的空间还是希望它们在div之外？ - David Chelliah

谢谢大家，我没有可用的代码。我只是想要一些关于如何完成这样的事情的例子。我可以参考你们的代码并学习它，然后根据我的项目需要使用它来创建自己的代码。谢谢！ - Richard Rodgers

不要忘记将其标记为已解决。 - DaniP

Answer 1

重点是调整较小div的顶部边距。将其设置为负值会将它们拉到较大div上方。请参见下面的代码。

或者，您可以将较小的div包装在一个更大的div中，并调整底部边距以将它们拉到下方。

.under {
  width: 400px;
  height: 150px;
  background-color: #3C77D4;
}

.over{
  background-color: #0E49AC;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 0 23px;
  margin-top: -80px;
}

<div class="under"></div>
<div class="over"></div>
<div class="over"></div>

- spencer.sm

Answer 2

正如@Liquidchrome的评论所述，有许多方法：

spencerlarry发布了一种可能的方法，这里是另一种方法，只有在您定义了宽度并且可能甚至由您计算时才有用

这是我的代码：

<div class="container">
    <div class="topPane">
      <div class="overlappingPane">

      </div>
      <div class="overlappingPane">

      </div>
      <div class="clearPane">

      </div>
   </div>
</div>



.container{
  display:inline-block;
}

.topPane{
  width:270px;
  height: 50px;
  border: 2px black solid;
  background-color:red;
}

.overlappingPane{
  background-color:blue;
  float:left;
  width: 90px;
  height:90px;
  margin: 20px 20px 20px 20px;
  border: 2px black solid;
}

.clearPane{
  clear:both;
}

这里是指向jsfiddle的链接： https://jsfiddle.net/npnz85x0/

- Daniel König