Question

为什么position:absolute元素在父级position:relative内的父级overflow:auto时会影响文档流？（以下示例）

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

元素从正常文档流中删除;没有为页面布局“MDN。
中的元素创建空间

div.a应始终只有100px高，并且永远不需要垂直滚动，因为它只有一行文本而它的子（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>

View on JSFiddle

Answer 1

绝对定位的元素将被拉出文档流但是浏览器总是可以通过提供滚动条来访问元素，除非有＆＃34; overflow：hidden＆＃34; -s应用于包装器

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

如果在溢出自动父级中，绝对位置不在文档流外

1 个答案: