Question

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

＆＃13;

.relative {
  position: relative;
  background: pink;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}

＆＃13;

<div class="relative">
  Placeholder <div class="absolute"></div>
</div>

＆＃13;

Answer 1

您对两件事情的期望是什么。要么body { overflow-x: hidden; }要么absolute div为position:fixed。

现在回答你的问题。

问题：为什么它仍会使页面溢出？

因为position:absolute相对于最近的位置祖先定位。

如果position:absolute div溢出到右/底，则会向右或向下滚动。

检查 Fiddle

position:fixed相对于视口的位置。它不会在任何一侧左/上/下/右流过。的 Fiddle

Here一些用于解释position
的链接

绝对定位：   这将滚动，但不在页面流中。   通常是从原来的位置搬走。

固定定位：   这不会滚动，也不会流动。   通常是从原来的位置搬走。

Reference

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>

希望它有所帮助。

Answer 2

我已经阅读了CSS 2.1 Docs（CSS3没有改变视觉格式化部分），这是我能找到的那样明确。

Section 2.3.1

对于所有媒体，术语canvas描述了＃34;呈现格式结构的空间。＆＃34;画布对于空间的每个维度都是无限的，但渲染通常发生在画布的有限区域内，由用户代理根据目标介质建立。

Section 9.1

连续媒体的用户代理通常为用户提供视口（屏幕上的窗口或其他查看区域），用户可通过该视口查阅文档。

当视口小于渲染文档的画布区域时，用户代理应提供滚动机制。

因此，当您添加绝对定位的元素时，即使它不会增加其包含块的宽度，也会增加画布的大小。然后，浏览器提供滚动机制，允许您查看整个画布。

要清楚，因为<div class="relative">变得更宽，或者甚至因为<body>或其他一些块变得更宽，所以不会发生滚动。这是因为渲染文档的底层画布变大了。

Answer 3

如果绝对定位元素，包装元素的高度和宽度取决于其内容。甚至是overflow。

要隐藏包装元素并删除滚动条，您应该删除正文标记的overflow。

＆＃13;

body {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  right: -100px;
  width: 200px;
  height: 100px;
  background: grey;
}

＆＃13;

<div class="relative">
  <div class="absolute"></div>
</div>

＆＃13;

Answer 4

一旦元素位于绝对位置（即使是负位置值），您的理解是，它将完全脱离正常的内容流。

你是对的，但是，再读一次。

句子“它将完全脱离正常的内容流”这并不意味着它隐藏如果将容器

如果您希望将其隐藏在容器外，则父级应为溢出：隐藏。

在您的情况下，它会使页面溢出，因为默认溢出属性值可见。它应该按照 W3C 那样存在。

W3C ：https://www.w3.org/TR/css3-positioning/#abs-pos

在绝对定位模型中，框相对于其包含块显式偏移。它完全从正常流程中移除（它对后来的兄弟姐妹没有影响）。绝对定位的框为正常流动的子项和绝对（但不是固定或页面）定位的后代建立新的包含块。但是，绝对定位元素的内容不会围绕任何其他框流动。它们可能会遮挡另一个框的内容（或自身被遮挡），具体取决于重叠框的堆栈级别。

MDN ：https://developer.mozilla.org/en/docs/Web/CSS/position

相对定位的元素仍然被认为是文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先（非静态）定位。如果定位的祖先不存在，则使用初始容器。

即使你将 .relative 设为固定宽度并设置溢出：隐藏，也会出现水平也滚动。

见下文：

.relative { position: relative; background: pink; width: 500px; overflow: auto; } .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>

Answer 5

您可以简单地将隐藏的溢出添加到相对位置元素并赋予其所需的高度。从我的角度来看，这是最好的解决方案。和绝对定位的div一起玩。

.relative {
  position: relative;
  background: pink;
  overflow:hidden;
}
.absolute {
  position: absolute;
  top: 0;
  right: -100px;
  width: 200px;
  height: 100px;
  background: rgba(0,0,0,.5);
}

Answer 6

说到浮动侧边栏，最近我正在研究它，我发现非常简单的解决方案非常有用，尤其是在您无权访问或不想在 body 元素上应用样式的情况下。

只想留在这里，也许对某人有用。

scss代码如下

$sidebar-width: 413px;

.right-sidebar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 100%;
  width: $sidebar-width;
  overflow-x: hidden;

  transition: width 500ms;

  &.isHidden {
    width: 0;
  }

  .right-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: $sidebar-width;
  }
}

这里的重点是将一个绝对定位的元素放置在另一个具有 overflow-x: hidden 的元素中，然后不是通过右坐标而是通过宽度进行转换以折叠父块。这个右侧的滑动侧边栏非常适合我。

为什么位置绝对会使页面溢出？

6 个答案: