移动设备上的绝对位置与固定位置

Question

我有以下 HTML 片段：

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  color: black;
}

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

如果我在孩子上使用 position:absolute，我在移动设备上查看页面时会得到垂直滚动。如果我将该位置更改为 position:fixed 我没有滚动条。

我试图理解为什么滚动以绝对位置出现以及为什么它不以固定位置出现。根据我的理解，绝对位置是相对于具有 position:relative 的最近父级。就我而言，这是占据全屏的第一个 div。

绝对位置不应该包含在父div中并且阻止滚动吗？换句话说，既然 position:absolute 已从页面流中删除，页面的高度不应该保持在 100vh 吗？

注意：我在 Chrome 和 Safari 上滚动。使用 Firefox，它可以在移动设备上按预期工作。我使用 IOS 设备和 Android 设备进行了测试。

Answer 1

有一些评论有点误导，所以这里有一个解释。

当你绝对定位一个元素时，正如你所说，它是相对于其最近的定位祖先来定位的，在本例中是高度为 100vh 的 div。

但是，浏览器默认情况下会在某些元素上添加边距，而您尚未删除它们。

如果将其背景设置为透明，则可以看到子元素完全位于父元素内。父级的绿色继续在其下方。

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /*background-color: white;*/
  background-color: transparent;
  color: black;
}

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

现在，为什么会出现滚动？

在最顶部，您可以看到一些白色。这是浏览器设置的边距。

如果我们默认将所有边距设置为 0，它就会消失，并且不需要滚动，因为父元素完全适合视口并且现在从其顶部开始。

* {
  margin: 0;
}

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background-color: white;*/
  background-color: transparent;
  color: black;
}

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

在子项被固定的情况下，它（在许多情况下，尽管不是全部）相对于视口是固定的，因此无论浏览器是否为元素添加边距，它都将位于屏幕的顶部。

这不是这里的位置，但也有例外 - 如果有一个具有变换属性的祖先。请参阅https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning