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

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

如果您将position: absolute; 用于子级，则不会将它们考虑到父级内容中。

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

元素相对于它的第一个定位（非静态）祖先元素定位

---

编辑： 这可以用javascript来实现，见这里https://codepen.io/tmacpolo/pen/ywvWbb

EDIT2： 添加了 MutationObserver 以在孩子身高发生变化时调整父母的高度 https://codepen.io/tmacpolo/pen/ywvWbb

Answer 2

这实际上是不可能的，因为 absolute 是如何工作的，因为它与布局无关。避免折叠的唯一方法是为其父元素提供强制高度。