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