html - 使父元素扩展以包含相对定位的子元素？

Question

是否有一种简单的方法(无需手动设置任何高度)确保父元素始终包裹/包含子元素，即使子元素已相对定位？

<div style="background-color: red;">
  <div style="background-color: pink; position: relative; top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>

在上面的例子中是“一”。 div 从其父级流出并重叠/隐藏“两个”。 div，但我想要的效果是让父级 div 包含整个子级和“两个”。元素在下方流动。

Answer 1

top 用于定位元素，使其对周围的元素没有影响。如果您还想影响父元素，请使用 margin-top，否则 top 不会影响其他元素。

<div style="background-color: red; display: flex;">
  <div style="background-color: pink; position: relative; margin-top: 20px">
    one.
  </div>
</div>
<div>
  two.
</div>