Html 如果处于溢出自动父级，则绝对位置不在文档流之外

为什么

位置：绝对

元素的父元素在

溢出：自动

的父元素中是

位置：相对

时会影响文档流？（下面的例子）

这似乎与预期的行为背道而驰：

从正常文档流中删除该元素；没有为页面布局中的元素创建空间”

div.a

应该始终只有100px高，并且不需要垂直滚动，因为它只有一行文本，并且它的子项（

div.b

）的高度为0。确实如此，我们可以看到

div.c

在正常文档流之外的位置

但是，如果对

div.a

应用了

overflow:auto

（如下示例），

div.a

适应

div.c

的高度（位置绝对元素上的高度，不应在正常文档流中）通过提供一个滚动条。为什么？

div.b

的高度仍然为0，而

div.c

在透明度中不显示绿色背景

.a{
高度：100px；
溢出：自动；/*切换此行*/
背景颜色：粉红色；
}
.b{
位置：相对位置；
背景颜色：绿色；
}
c{
位置：绝对位置；
背景色：rgba（255、255、255、.5）；
高度：500px；
排名：0；
}

我应该只有100像素高
我是绝对位置，高度为500px

绝对定位元素将从文档流中拉出，但浏览器将始终通过提供滚动条使您能够访问元素，除非包装器上应用了“溢出：隐藏”-s

稍微澄清一下：即使溢出的内容也会被浏览器视为文档的一部分，它会扩展视图的边距，使其包含视图中的所有元素。

overflow

的默认值设置为

visible