logo标签列表

为什么 position: absolute; 和 bottom: 0; 不在 body 底部？

htmlcss
8
更新：我知道给 body 添加 position: relative; 可以使元素位于 body 底部，但是当找不到非静态父元素时，它的位置会与什么相关，我没有找到相关说明。所以我认为这个问题不同于这个问题。感谢 @Ben Kolya Mansley。
====
我正在编写一个组件，遇到了一个问题。我将一个元素的位置设置为 absolute 并将其附加到 document.body 上（body 的高度大于屏幕的高度），但是它不在 body 的底部，而是在视口的底部。为什么会这样奇怪呢？
我阅读了 position 和 bottom 的 mdn 文档。它说，position 为 absolute 的元素将查找非静态定位的父元素，如果找不到，则相对于 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>
你应该把 <style> 标签放在 <head> 元素内，而不是 <body> 中。 - treyBake
1
因为默认情况下position是static，所以body需要position:relative。而body并不算作父级元素。 - Paulie_D
1个回答
8
从MDN的关于绝对定位的文档中得知：

绝对定位元素的位置是相对于最近的已定位祖先元素（即不为 static 的祖先元素）来确定的。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（initial containing block），即视口或根元素的包含块。

这意味着，它被定位到的不是 body 元素，而是初始包含块，其尺寸为视口的尺寸，而非 body 元素。
通过给 body 添加 position: relative; 属性，元素将会被对齐到底部。
更多有关初始包含块的信息可以在W3规范中找到。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接