Question

更新：我知道添加一个职位：相对； to body将使元素位于body的底部，我只是没有找到关于何时找不到非静态父级，位置将与之相关的描述。因此，我认为这个问题不会重复到this one。感谢@Ben Kolya Mansley

====

我正在编写组件，但遇到了问题。我将元素位置设置为绝对且底部为0，并将其附加到document.body（主体高度大于屏幕的高度），但它不在主体的底部，而是视口的底部。为什么这么有线？

我读了位置和底部的意思。它说绝对位置的元素将寻找一个非静态的位置父元素，如果找不到，它将相对于主体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      body {
        height: 1500px;
      }
      .bar {
        position: absolute;
        bottom: 0;
      }
    </style>
    <div class="bar">this is bar</div>
  </body>
</html>

Answer 1

根据MDN的documentation的绝对位置：

绝对定位的元素相对于其最近定位的祖先（即不是静态的最近祖先）定位。如果不存在已定位的祖先，则将其相对于文档的根元素的包含块ICB（初始包含块）放置。

这说明不是它定位到的body，而是初始包含块，它具有视口的尺寸，而不是主体的尺寸。

通过将position: relative;添加到body，该元素将与底部对齐。

有关初始容纳区的更多信息，请访问W3 specification

为什么位置：绝对；底部：0；不在身体的底部吗？

1 个答案: