Question

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

＆＃13;

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

＆＃13;

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

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>

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

1 个答案: