时间戳

首页 > 解决方案 > 在绝对定位的 div 元素后恢复正常的 HTML 流

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

问题描述

在绝对定位的 div 元素之后是否可以恢复正常的 HTML ？我正在尝试particle.js在标题 div 中使用背景，其顶部是子元素（仅包含一些文本）。然后从父 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>

标签： htmlcss

解决方案

您可以将 #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>

推荐阅读