This question already has answers here:
How can I position my div at the bottom of its container?
（23个答案）
2年前关闭。
更新：我知道添加一个职位：相对； to body将使元素位于body的底部，我只是没有找到关于何时找不到非静态父级，位置将与之相关的描述。所以我不认为这个问题重复到this one。感谢@Ben Kolya Mansley
====
我正在编写组件，遇到了问题。我将元素位置设置为绝对且底部为0，并将其附加到document.body（主体高度大于屏幕的高度），但它不在主体的底部，而是视口的底部。为什么这么有线？
我读了位置和底部的意思。它说具有绝对位置的元素将寻找一个非静态的定位父对象，如果找不到，它将相对于主体。
（23个答案）
2年前关闭。
更新：我知道添加一个职位：相对； 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>
最佳答案
根据MDN的documentation关于绝对定位：
绝对定位的元素相对于其最近定位的祖先（即，不是静态的最近祖先）定位。如果不存在已定位的祖先，则将其相对于文档根元素的包含块ICB（初始包含块）放置。
这说明不是它定位到的body，而是初始包含块，它具有视口的尺寸，而不是主体的尺寸。
通过将position: relative;添加到body，元素将与底部对齐。
有关初始包含块的更多信息，请参见W3 specification