html - CSS相对定位和流程

Question

我有以下布局。我已设置 CSS，以便 p 元素与第一个 div 重叠。

#wrapper {
  width: 600px;
  margin: 0 auto;
}
.div-01 {
  background: red;
  height: 400px;
}
.div-02 {
  background: green;
  height: 200px;
}
p {
  background: blue;
  color: #fff;
  margin: 0 100px;
  padding: 100px;
  position: relative;
  bottom: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>

但我也希望绿色 div 之前没有间隙，请注意，绿色 div 的作用类似于 p 的位置 尚未修改。

我知道这是正常行为，但是有什么方法可以让绿色 div 直接出现在 p 之后吗？

编辑:

抱歉，我应该提到我希望这样，p 之后的所有 元素都可以表现得就像 p 没有一样。没有完全按照相对定位移动，但就好像它的自然位置与蓝色 div

重叠

所以在p之后的任何元素之间基本上没有间隙

我也无法使用绝对定位，因为不清楚任何元素在真实事物中的高度

Answer 1

您可以在绿色 div 上使用与蓝色 div 的 bottom 位置相同数量的负 margin-top。

#wrapper {
  width: 600px;
  margin: 0 auto;
}
.div-01 {
  background: red;
  height: 400px;
}
.div-02 {
  background: green;
  height: 200px;
  margin-top: -100px;
}
p {
  background: blue;
  color: #fff;
  margin: 0 100px;
  padding: 100px;
  position: relative;
  bottom: 100px;
}

<div id="wrapper">
  <div class="div-01"></div>
  <p>Hello world</p>
  <div class="div-02"></div>
</div>