为什么绝对定位的孩子会扩大容器高度以及如何防止这种情况？答案

【问题标题】：Why does an absolutely positioned child expand container height and how to prevent this?为什么绝对定位的孩子会扩大容器高度以及如何防止这种情况？
【发布时间】：2014-06-25 19:05:20
【问题描述】：

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

我读过practically everywhere 说position: absolute 的孩子不会影响父母的身高，因为它超出了正常流程。但是在我的例子中，一个绝对元素扩展了父元素，我不明白为什么。

（我尝试阅读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;
}

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

如何防止这种行为？如果绝对定位的元素不适合“正常”子级“指定”的容器高度，我希望将其裁剪。

See it live.

【问题讨论】：

body 可能有一些默认的填充/边距。
我的同事建议我在容器上尝试position: relative，它成功了。看在上帝的份上，我想不通为什么。
因为没有它，绝对位置将相对于主体，而定位 left 将参考视口并忽略填充/边距？ _ codepen.io/Paulie-D/pen/aexbz

标签： css scroll overflow css-position absolute

【解决方案1】：

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

.container{
     position: relative;
}

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

【讨论】：

这可行，但我仍然不明白为什么它会扩展其容器的高度。你觉得你能解释一下吗？
它不会扩展容器高度，因为您没有在 .container 上设置明确的高度。由于 .outsider 是根据 body 而不是 .container 定位的，因此您滚动的是 body，而不是容器，这就是您能够看到 .outsider 的原因。
这完全有道理。谢谢！
来自 MDN 文档，“绝对定位的元素已从正常的文档流中移除；在页面布局中没有为元素创建空间”。按照这个逻辑，在上面的例子中，outsider 不应该添加额外的空间，因此不应该有任何滚动条。那么我在这里错过了什么？
我的猜测是，如果缺少overflow: hidden;，则无论父级是否具有position: relative;，绝对定位的元素将始终扩展body 标签的高度或宽度。至少我看到的效果是这样的。