如何在 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>

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 的 Link： https://jsfiddle.net/npnz85x0/

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

How to overlap top div tags in css

html

css

overlapping