使父元素扩展以包含相对定位的子元素?
Posted
技术标签:
【中文标题】使父元素扩展以包含相对定位的子元素?【英文标题】:Making parent element expand to contain a relatively positioned child? 【发布时间】:2018-11-06 21:38:03 【问题描述】:是否有一种简单的方法(无需手动设置任何高度)来确保父元素始终包裹/包含子元素,即使子元素已相对定位?
<div style="background-color: red;">
<div style="background-color: pink; position: relative; top: 20px">
one.
</div>
</div>
<div>
two.
</div>
在上面的例子中是“一”。 div 流出其父级并重叠/隐藏“两个”。 div,但我想要的效果是让父 div 包含整个孩子和“两个”。元素在下面流动。
【问题讨论】:
参考这个:重复:***.com/questions/1709442/…> 那是关于浮动的,这不是,不是重复的。不过,这是一个愚蠢的问题,mehulmpt 完美地回答了它,已经太久没有网络内容了。 【参考方案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>
【讨论】:
噢!现在我觉得自己很傻,好久没有做网络的东西了。谢谢!以上是关于使父元素扩展以包含相对定位的子元素?的主要内容,如果未能解决你的问题,请参考以下文章