CSS位置 - 部分重叠的div

Question

我有基本的CSS布局的问题。 DIV2 150像素上升和部分重叠DIV1。我有把DIV3只是DIV2下一个问题。我能做到这一点采用相同的CSS在DIV2至DIV3，但那不是我要找的，因为它们在许多其他的div，它似乎我将不得不做同样的所有其他人。一定有什么东西复位位置。我希望我解释清楚我自己。 DIV2的高度必须是灵活的（移动）。

视觉图：

系统DV II：

position: relative;
top: -150px;

HTML：

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

Answer 1

在CSS中使用margin-top财产top代替。以下div2其余的div会自动跟随。

如果它仍然不工作，分享你的代码的工作小提琴。

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

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

Answer 2

添加到您的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>