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

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>

Answer 1

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

问题是，负向左对齐不会在主体上显示溢出，而负向右对齐会。不太合逻辑……我知道。

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

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

至于为什么会出现这种情况:我一直理解屏幕的左上角是x:0,y:0:坐标系的原点，只包含正值(在RTL情况下是水平镜像的) ).此坐标系中的负值是“ Canvas 外”的，因此不需要滚动条，而“ Canvas 上”元素则需要。换句话说: Canvas 上的元素会放大您的页面并使您的 View 自动滚动(除非另有说明)，而 Canvas 外的元素则不会。