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

Question

有人可以告诉我如何在CSS中实现以下效果。我需要在底部放置一个div，在顶部放置两个div，如下图所示。

Answer 1

关键是调整较小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>