html – 为什么位置绝对会使页面溢出？

我的理解是,一旦元素定位为绝对(即使具有负位置值),它将完全脱离正常的内容流.但为什么它仍然使页面溢出？当您在下面运行代码片段时,会出现水平滚动条,我认为它不应该存在.

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

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

解决方法

我想我知道这个问题来自哪里.当人们想要一个没有水平滚动条的元素离开屏幕时,你必须对屏幕左侧使用(负)绝对定位的人感到困惑.这是滑块,菜单和模态的常用技术.

问题是负的LEFT对齐不会在身体上显示溢出,而负向右对齐也会显示溢出.不太合乎逻辑……我知道.

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

我希望这会消除你的困惑.

至于为什么会发生这种情况：我一直都知道屏幕的左上角是x：0,y：0：坐标系的原点只包含正值(在RTL情况下水平镜像).此坐标系中的负值是“非画布”,因此不需要滚动条,而“画布上”元素则不需要.换句话说：on-canvas元素将放大页面并使视图自动滚动(除非另有说明),而非画布元素则不会.

原文地址：https://www.jb51.cc/html/232190.html