在绝对定位的div元素之后恢复正常的HTML流

Question

是否可以在绝对位置的div元素之后恢复正常的HTML？我正在尝试在标头div中使用particle.js背景，其顶部是子元素（仅包含一些文本）。然后从父div的末尾（particle-js div）开始，我想要正常的HTML流。

#parent {
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}

#child {
  position: relative;
  left: 50px;
  top: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  background-color: blue;
}

<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>

Answer 1

您可以将#parent和child包裹在另一个相对的div中，以使其高度为https://jsfiddle.net/f6phun8a/2/

#parent {
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}
#outer {
  position: relative;
  height: 200px;
}
#child {
  position: relative;
  left: 50px;
  top: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  background-color: blue;
}


<div id="outer">

<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>

</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>

Answer 2

#flexwrap {
 display:flex;
 flex-direction:column;
}

#parent {
  flex:0 0 200px;
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: red;
}

#child {
  flex:1;
  position: relative;
  margin-top: 200px;
  margin-left: 50px;
  height: 50px;
  width: 50px;
  background-color: green;
}

#after-parent {
  flex:1;
  background-color: blue;
}

<div id="flexwrap">
<div id="parent">
  <p>Parent div</p>
</div>
<div id="child">
  <p>child div</p>
</div>
<div id="after-parent">
  <h1>Normal HTML flow after parent div</h1>
</div>
 </div>