为啥位置:绝对;和底部: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;不在身体的底部? [复制]的主要内容,如果未能解决你的问题,请参考以下文章