CSS位置 - 部分重叠div

Question

我有基本的CSS布局问题。 DIV2上升150px，部分重叠DIV1。将DIV3放在DIV2下面时遇到问题。我可以使用与DIV2相同的CSS应用到DIV3，但这不是我正在寻找的，因为它们是许多其他div，并且它似乎我必须对所有其他人做同样的事情。必须要有一些东西来重置位置。我希望我能清楚地解释自己。 DIV2的高度也必须灵活（移动）。

视觉图表：

CSS DIV2：

position: relative;
top: -150px;

HTML：

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Answer 1

将此添加到您的div2，虽然这不是最佳做法：

margin-bottom: -150px

.div1,
.div2,
.div3 {
  height: 150px;  
}

.div1 {
  background: red;  
}

.div2 {
  background: blue;
  position: relative;
  top: -75px;
  margin-bottom: -75px;
}

.div3 {
  background: green;  
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Answer 2

在CSS中使用margin-top代替top属性。 <{1}}以下的其余div会自动跟随。

如果它仍然不起作用，请分享您的代码的工作小提琴。

div2

div {
  width: 300px;
  height: 150px;
}
.div1 {
  background: red;
}
.div3 {
  background: green;
}
.div2 {
  margin: 0 auto;
  margin-top: -50px;
  background: yellow;
  width: 150px;
}
.parent {
  width: 300px;
  margin: 0 auto;
}