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

Question

有人可以向我解释如何在CSS中完成以下效果。我需要在底部有一个div，两个div在顶部重叠，如下图所示。

Answer 1

关键是调整较小div的上边距。将其设置为负值会将它们拉到较大的值上。请参阅下面的代码。

或者，您可以将较小的div包裹在较大的div中，并调整底部边距以将其向下拉。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/