为啥位置：绝对；和底部：0；不在身体的底部？ [复制]
Posted
技术标签:
【中文标题】为啥位置：绝对；和底部：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 不算作父母。
【参考方案1】：
来自 MDN 的 documentation 绝对定位：
绝对定位的元素是相对于它最近的定位祖先（即最近的非静态祖先）定位的。如果定位的祖先不存在，则相对于 ICB（初始包含块）定位，该 ICB 是文档根元素的包含块。
这说明它定位到的不是body，而是初始包含块，它具有视口的尺寸，而不是主体。
通过将position: relative; 添加到body，元素将与底部对齐。
有关初始包含块的更多信息，请访问W3 specification
【讨论】：
以上是关于为啥位置：绝对；和底部：0；不在身体的底部？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章