如果在溢出自动父级中，绝对位置不在文档流外
如果在溢出自动父级中，绝对位置不在文档流外
提问于 2017-11-30 19:18:51
为什么position:absolute元素会影响文档流，而它的父元素在父元素(即overflow:auto )中是position:relative？(例子如下)
这似乎与预期的行为背道而驰：
元素将从常规文档流中删除；在页面布局“MDN”中没有为元素创建任何空间。
div.a应该始终只有100 be高，并且不需要垂直滚动，因为它只有一行文本，并且它的子(div.b)的高度为0。事实确实如此，我们可以看到div.c在正常文档流之外的位置。
但是，如果将overflow:auto应用于div.a (如下面的示例)，则div.a通过提供滚动条来容纳div.c的高度(位置绝对元素上的高度不应该在正常的文档流中)。为什么div.b的高度仍然为0，而div.c则没有通过透明度显示绿色背景。
.a {
height: 100px;
overflow: auto; /* TOGGLE THIS LINE */
background-color: pink;
}
.b {
position: relative;
background-color: green;
}
.c {
position: absolute;
background-color: rgba(255, 255, 255, .5);
height: 500px;
top: 0;
}<div class="a">
I should only be 100px tall
<div class="b">
<div class="c">
I am position absolute with a height of 500px
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2017-11-30 19:38:23
绝对定位的元素将从文档流中提取出来，但是浏览器总是可以通过提供滚动条来访问元素，除非有“溢出:隐藏”-s应用于包装器。
为了稍微清理一下:浏览器将把超出的内容视为文档的一部分，并且它将扩展视图的边距，从而包含视图中的所有元素。overflow的默认值设置为visible。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47581060
复制相关文章
相似问题
腾讯云开发者
