为什么绝对定位的孩子会扩大容器高度以及如何防止这种情况？
Dan*_*mov 6 css scroll css-position overflow absolute
假设您有一个父级 div，其中包含多个普通子级和一个绝对子级。
\n\n我几乎到处 都读到，孩子的position: absolute身高不会影响父母的身高，因为它不符合正常流程。然而就我而言，绝对元素扩展了父元素，我不明白为什么。
（我尝试阅读规范，但我真的迷失了。）
\n\n\n\n<div class="container">\n <div class="block"></div>\n <div class="block"></div>\n <div class="block"></div>\n <div class="outsider"></div>\n</div>\n.container {\n overflow: hidden;\n}\n\n.block, .outsider {\n width: 100%;\n height: 1000px;\n}\n\n.block {\n background: red;\n}\n\n.outsider {\n position: absolute;\n left: 0;\n top: 3000px;\n background: green;\n opacity: 0.5;\n}\n
为什么浏览器让我滚动超过元素的假定高度？它在 Chrome、Safari 和 Firefox 中似乎是一致的，所以我认为它是规范的一部分。
\n\n我该如何防止这种行为？如果绝对定位的元素不适合 \xe2\x80\x9cdictated\xe2\x80\x9d 的容器高度 \xe2\x80\x9cnormal\xe2\x80\x9d 子元素，我希望将其裁剪。
\n\n\n您缺少父容器上的位置。添加
.container{
position: relative;
}
绝对定位的元素将返回 DOM 以找到最近的定位父元素，在这种情况下，您没有显式定义的元素，因此它将返回到<body>
- 它不会扩展容器高度，因为您没有在 .container 上设置显式高度。由于 .outsider 是根据 body 而不是 .container 定位的，因此您滚动的是 body，而不是容器，这就是为什么您能够看到 .outsider。 (3认同)