html - 如何在相对父容器中包含绝对子容器

Question

有没有办法让相对父容器的高度根据他的绝对子容器来增长？

https://codepen.io/daniele-acquaviva/pen/JzpzxG

.relative-parent {
  background: red;
  position: relative;
  text-align: center;
}

.absolute-child {
  background: yellow;
  position: absolute;
  top: 0;
}

<div class="relative-parent">
  <p> Parent div content </p>
  <div class="absolute-child">
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
  </div>
</div>

Answer 1

如果您对 child 使用 position: absolute;，则他们不会考虑到父内容。

根据 w3schools 文档:https://www.w3schools.com/cssref/pr_class_position.asp

The element is positioned relative to its first positioned (not static) ancestor element

---

编辑:这可以通过 javascript 实现，请参见此处 https://codepen.io/tmacpolo/pen/ywvWbb

编辑2:添加了 MutationObserver 以在子高度变化时调整父高度 https://codepen.io/tmacpolo/pen/ywvWbb