为什么位置绝对make页面溢出？ [英] Why does position absolute make page to overflow?

问题描述

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

  .relative {position：relative; background：pink;}。absolute {position：absolute; top：0; right：-100px; width：200px; height：100px;背景：rgba（0,0,0，.5）;}  

 < div class =relative>占位符
 

b

解决方案

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

事情是，负的LEFT对齐不会在主体上显示溢出，而负的右对齐会。不太合乎逻辑...我知道。

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

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

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

My understanding is once an element is positioned absolute (even with a negative position value), it will completely out of the normal content flow. But why does it still make the page to overflow? When you run code snippet below, the horizontal scrollbar appears, I thought it shouldn't be there.

.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>

解决方案

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

这篇关于为什么位置绝对make页面溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！