gpt4 book ai didi

css - 为什么绝对定位的 child 会扩展容器高度以及如何防止这种情况发生?

转载 作者:行者123 更新时间:2023-11-28 11:10:12 26 4
gpt4 key购买 nike

假设您有一个父级 div,其中包含多个普通子级和一个绝对子级。

我读过 practically everywhere position: absolute 的 child 不会影响 parent 的高度,因为它不在正常流程中。但是在我的例子中,绝对元素扩展了父元素,我不明白为什么。

(我尝试阅读 the spec 但我真的迷路了。)

HTML

<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="outsider"></div>
</div>

CSS

.container {
overflow: hidden;
}

.block, .outsider {
width: 100%;
height: 1000px;
}

.block {
background: red;
}

.outsider {
position: absolute;
left: 0;
top: 3000px;
background: green;
opacity: 0.5;
}

CSS overflow

为什么浏览器让我滚动超过元素的假定高度?它在 Chrome、Safari 和 Firefox 中似乎是一致的,所以我认为它是规范的一部分。

如何防止这种行为?如果绝对定位的元素不适合“正常” child “指定”的容器高度,我希望它被裁剪。

See it live.

最佳答案

您在父容器上缺少一个位置。添加

.container{
position: relative;
}

绝对定位的元素将返回 DOM 以找到最近的定位父元素,在这种情况下您没有明确定义,因此它会返回到 <body>

关于css - 为什么绝对定位的 child 会扩展容器高度以及如何防止这种情况发生?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23540924/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com