为什么绝对定位的元素可以使区域可滚动? [英] Why can absolutely positioned elements make areas scrollable?

问题描述

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

.relative {位置:相对；背景:粉色；}.绝对{位置:绝对；顶部:0；右:-100px；宽度:200px；高度:100px；背景:RGBA(0,0,0,.5)；}

占位符<div class="absolute"></div>

解决方案

我想我知道这个问题的出处.当人们希望元素在没有水平滚动条的情况下离开屏幕时，他们一定会对在屏幕左侧使用(负)绝对定位的人感到困惑.这是滑块、菜单和模态的常用技术.

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

为了说明这一点，我在左边创建了一个绝对元素的笔: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 exist completely out of the normal content flow. But why does it still make the page scrollable? When you run the 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.

这篇关于为什么绝对定位的元素可以使区域可滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！