我的理解是,一旦元素定位为绝对(即使具有负位置值),它将完全脱离正常的内容流.但为什么它仍然使页面溢出？当您在下面运行代码片段时,会出现水平滚动条,我认为它不应该存在.
.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元素将放大页面并使视图自动滚动(除非另有说明),而非画布元素则不会.
