更新：我知道添加一个位置：相对；to body 会使元素位于 body 的底部，我只是没有找到当未找到非静态父级时，位置将与什么相关的描述。所以我不认为这个问题与这个问题重复。感谢@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>
来自 MDN关于绝对定位的文档：
绝对定位的元素相对于其最近的定位祖先（即非静态的最近的祖先）进行定位。如果定位祖先不存在，则它相对于 ICB（初始包含块）定位，即文档根元素的包含块。
这描述了它不是body定位到的，而是初始包含块，它具有视口的尺寸，而不是主体的尺寸。
通过添加position: relative;到body，元素将与底部对齐。
| 归档时间： |
|
| 查看次数： |
5765 次 |
| 最近记录： |