为什么在定位的祖先上设置溢出会影响其相对定位的孩子的位置？答案

【问题标题】：Why does setting overflow on a positioned ancestor affect its relative positioned child's position?为什么在定位的祖先上设置溢出会影响其相对定位的孩子的位置？
【发布时间】：2020-08-02 03:33:14
【问题描述】：

相对定位元素是相对于最近的定位祖先。我找不到有关文档的原因是，为什么当这个父级将其溢出设置为“可见”以外的值时，其相对定位的子级的定位似乎受到了影响。

我在这里复制了这个，尝试取消注释第 12 行：

html {
  /* this is required to reproduce the issue */
  overflow-y: auto;
}

body {
  background-color: hotpink;
  position: relative;
  margin: 10px;

  /* UNCOMMENT LINE 12 AND #APP WILL DISAPPEAR. WHY? */
  /* overflow-y: auto; */
}

#app {
  position: absolute;
  background-color: black;
  left: 0;
  top: 0;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      Uncomment line #12 and I will disappear. Why?
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

这是完全相同的 sn-p，但重新启用了第 12 行：

html {
  /* this is required to reproduce the issue */
  overflow-y: auto;
}

body {
  background-color: hotpink;
  position: relative;
  margin: 10px;

  /* UNCOMMENT LINE 12 AND #APP WILL DISAPPEAR. WHY? */
  overflow-y: auto;
}

#app {
  position: absolute;
  background-color: black;
  left: 0;
  top: 0;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      Uncomment line #12 and I will disappear. Why?
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

这是一个代码沙箱，您可以使用它： https://codesandbox.io/s/falling-cherry-pce0t?file=/src/styles.css

我在这里创建了一个屏幕录像：https://app.usebubbles.com/dtb9vyNadHq8eMm2YsbfAQ/comments-on-codesandbox-io/

我知道粘性定位元素通过滚动机制粘到最近的祖先，滚动机制被定义为溢出设置为“可见”以外的值的元素。我想知道这是否有某种关系。

为什么在定位的祖先上设置溢出会影响其相对定位的孩子的位置？ IE。为什么重新启用第12行时，上面的sn-p中#app会消失？

【问题讨论】：

标签： html css position

【解决方案1】：

解决方案很简单。您没有为 body 元素指定高度。由于#app 有position: absolute，父元素没有定义也没有相关元素，父元素折叠并达到高度0。

而且，由于body 没有高度，您不能溢出它。你只能使用#app滚动它溢出的内容。

html {
  overflow-y: auto;
}
body {
  background-color: hotpink;
  position: relative;
  height: calc(100vh - 20px);
  width: calc(100vw - 20px);
  margin: 10px;
}

#app {
  position: absolute;
  background-color: black;
  color: white;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app">
      This paragraph will overflow in y direction once text fills the container.
    </div>
  </body>
</html>

【讨论】：

所以基本上你说这是因为身体隐藏了所有溢出，因为它没有高度。那么为什么会这样渲染呢？它没有高度，溢出设置为隐藏：codesandbox.io/s/dreamy-shape-g3o7j?file=/src/styles.css
当您不使用overflow-y: hidden 时，CSS 会将溢出属性发送到 default，即overflow: visible，它仍然具有 height 属性 0 但它显示了#app，因为所有溢出都是可见的。但是当您使用overflow-y: hidden 时，它会隐藏任何水平溢出的内容。因此，由于 body 的高度为 0，并且没有相关元素，因此没有内容可见。要检查它，只需将height: 50px 放入您之前代码的正文中，您就会明白我的意思。
我在第 12 行设置了overflow-y: hidden;，但它仍然可见。你怎么解释？
真的吗？你说的是body 还是#app。如果您在旧代码的第 12 行中确实设置了 overflow-y: hidden 并且根本没有更改任何内容，则 #app 一定是不可见的，但 body 的背景应该是可见的。