为什么绝对位置会导致页面溢出？

Question

我的理解是一旦一个元素被绝对定位（即使位置值为负），它就会完全脱离正常的内容流。但是为什么还是让页面溢出呢？当你运行下面的代码片段时，水平滚动条出现了，我认为它不应该在那里。

 .relative {
  position: relative;
  background: pink;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}

 <div class="relative">
  Placeholder <div class="absolute"></div>
</div>

原文由 Stickers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想我知道这个问题从何而来。当人们希望一个元素在屏幕外没有水平滚动条时，你一定会对在屏幕左侧使用（负）绝对定位的人感到困惑。这是滑块、菜单和模式的常用技术。

问题是负左对齐不会显示正文溢出，而负右对齐会。不太合逻辑……我知道。

为了说明这一点，我在左侧创建了一支带有绝对元素的笔： left: -100px; http://codepen.io/anon/pen/vGRxdJ 和一支在右侧带有绝对元素的笔： right: -100px; http://codepen.io/anon/pen/jqzBZd 。

我希望这能消除你的困惑。

至于为什么会这样：我一直理解屏幕的左上角是 x:0, y:0：坐标系的原点，仅由正值组成（在 RTL 情况下水平镜像）。此坐标系中的负值是“画布外”的，因此不需要滚动条，而“画布上”元素则需要。换句话说：画布上的元素将放大您的页面并使您的视图自动滚动（除非另有指示），而画布外的元素则不会。

原文由 Mr. Hugo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

absolute ：该元素已从文档流中删除，其他元素的行为就好像它不存在一样，而所有其他位置属性都将对其起作用。

CSS 技巧

这意味着页面的布局以及其他元素的大小和位置不会改变。正如我们所见，页面的宽度确实会发生变化，但这不称为布局。

页面布局是图形设计的一部分，它处理页面上视觉元素的排列。它通常涉及组成的组织原则[…]

维基百科

当宽度改变时，元素的组成不会改变（至少，在这种情况下），所以布局不会改变。宽度确实发生了变化，但这是应该发生的。如果您现在问自己：“但是为什么？”，请阅读下一部分。

关于“为什么”的问题： 并不总是真正的原因；它就是这样，你要么使用它，要么你坐着不动并质疑它。这也不是什么大问题。元素不能溢出窗口，那将是一个问题。 更多关于“为什么”的问题。 我并不是说所有“为什么”的问题都是不好的，但是如果你问某个特性是否应该存在，可能没有好的答案，只有一个好的或足够的解决方案。

解决方案： 将 overflow-x: hidden 添加到body的CSS中。当您将它添加到 .relative 时， .absolute 的不同部分也将被切断，因为 .absolute 具有更高的高度

当您添加 overflow-x:hidden body 的所有内容时，全宽都将不可见，因此它不会拉伸页面。

 body {
  overflow-x:hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: -100px;
  width: 200px;
  height: 100px;
  background: grey;
}

 <div class="relative">
  <div class="absolute"></div>
</div>

原文由 LarsW 发布，翻译遵循 CC BY-SA 4.0 许可协议