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

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

这实际上是不可能的，因为绝对值是如何工作的，因为它从布局中流出。避免塌陷的唯一方法是为其父元素赋予力高。