在绝对定位的 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>

加布尔·伊西莫

您可以将 #parent 和 child 包裹在另一个相对 div e 中给它高度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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章