如何在相对父容器中包含一个绝对的孩子

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：添加了突变操作器以调节孩子身高变化时的高度https://codepen.io/tmacpolo/pen/ywvwbb

Answer 2

这实际上是不可能的，因为绝对的工作方式是因为它从布局中流出了流量。避免崩溃的唯一方法是给其父元素的力高。