为什么位置：绝对；和底部：0；不在身体的底部？ [复制]答案

【问题标题】：Why position: absolute; and bottom: 0; not being at body's bottom? [duplicate]为什么位置：绝对；和底部：0；不在身体的底部？ [复制]
【发布时间】：2019-05-20 05:18:38
【问题描述】：

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

====

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

我读了position和bottom的mdn。它说具有绝对位置的元素将寻找非静态定位的父级，如果找不到，它将相对于主体。

<!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>

【问题讨论】：

你真的应该把你的<style>标签放在<head>元素里面——而不是你的<body>
因为body需要position:relative，默认是position:static。 body 不算作父母。

标签： html css

【解决方案1】：

来自 MDN 的 documentation 绝对定位：

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

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

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

有关初始包含块的更多信息，请访问W3 specification

【讨论】：