Sti*_*ers 11 html css css-position
我的理解是,一旦元素定位为绝对(即使具有负位置值),它将完全脱离正常的内容流.但为什么它仍然使页面溢出？当你在下面运行代码片段时,会出现水平滚动条,我认为它不应该存在.
.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>Lar*_*rsW 11
absolute:元素从文档流中移除,其他元素的行为就像它甚至不存在一样,而所有其他位置属性都可以在它上面工作.
CSS-技巧
这意味着页面的布局以及其他元素的大小和位置不会改变.正如我们所见,页面的宽度确实发生了变化,但这并不称为布局.
页面布局是图形设计的一部分,用于处理页面上视觉元素的排列.它通常涉及组成维基百科的组织原则
当宽度改变时,元素的组成不会改变(至少在这种情况下),因此布局不会改变.宽度确实会改变,但这应该发生.如果你现在问自己:"但为什么？",请阅读下一篇文章.
关于"为什么"的问题:并不总是一个真正的原因; 这是它的方式,你要么使用它,要么静坐不动并质疑它.这也不是问题.元素无法溢出窗口,这将是一个问题.更多关于"为什么"的问题.我并不是说所有"为什么"的问题都不好,但如果你问某个特征是否应该存在,可能就没有一个好的答案,只有一个好的或充分的解决方案.
解决方案:添加overflow-x:hidden到正文的CSS.当你添加它时.relative,它的另一部分.absolute也会被切割,因为它.absolute有更多的高度.
当您添加全宽overflow-x:hidden以外的所有内容时body将是不可见的,因此它不会拉伸页面.
body {
overflow-x:hidden;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
right: -100px;
width: 200px;
height: 100px;
background: grey;
}<div class="relative">
<div class="absolute"></div>
</div>您可以通过两种方式获得您期望的结果。要么 make body { overflow-x: hidden; }，要么将更改.absolute <div>为position:fixed。
现在回答你的问题。
为什么它仍然使页面可滚动？
因为position:absolute相对于最近的定位祖先定位。
如果position:absolute <div>区域溢出到右侧/底部，则 a将使区域可滚动到右侧或底部。
检查小提琴
相反，position:fixed相对于视口定位。它不会在任何一侧溢出。小提琴
这里有一些解释position 的链接。
绝对定位：这将滚动，但超出页面流。通常从原始位置移动。
固定定位：这不会滚动，并且不流畅。通常从原始位置移动。
body {
overflow-x: hidden;
}
.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>希望能帮助到你。
我想我知道这个问题来自哪里.当人们想要一个没有水平滚动条的元素离开屏幕时,你必须对屏幕左侧使用(负)绝对定位的人感到困惑.这是滑块,菜单和模态的常用技术.
问题是负的LEFT对齐不会在身体上显示溢出,而负向右对齐也会显示溢出.不太合乎逻辑......我知道.
为了说明这一点,我在左边创建了一个带有绝对元素的笔:left: -100px; http://codepen.io/anon/pen/vGRxdJ和带右边绝对元素的笔:right: -100px; http://codepen.io/anon/pen/jqzBZd.
我希望这会消除你的困惑.
至于为什么会发生这种情况:我一直都知道屏幕的左上角是x:0,y:0:坐标系的原点只包含正值(在RTL情况下水平镜像).此坐标系中的负值是"非画布",因此不需要滚动条,而"画布上"元素则不需要.换句话说:on-canvas元素将放大页面并使视图自动滚动(除非另有说明),而非画布元素则不会.
我已经通读了 CSS 2.1 文档（CSS3 没有更改视觉格式部分），这是我所能找到的最明确的。
对于所有媒体，术语画布描述“呈现格式结构的空间”。画布对于空间的每个维度都是无限的，但渲染通常发生在画布的有限区域内，由用户代理根据目标介质建立。
连续媒体的用户代理通常为用户提供一个视口（屏幕上的窗口或其他查看区域），用户通过该视口查阅文档。
当视口小于呈现文档的画布区域时，用户代理应提供滚动机制。
因此，当您添加绝对定位元素时，即使它没有增加其包含块的宽度，也会增加画布的大小。浏览器然后提供滚动机制以允许您查看整个画布。
需要明确的是，滚动不会因为<div class="relative">变得更宽而发生，甚至不会因为<body>其他块变得更宽。这是因为渲染文档的底层画布变大了。
| 归档时间： |
|
| 查看次数： |
8713 次 |
| 最近记录： |