html - 如何重叠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>