更新:我知道给 body 添加 position: relative; 可以使元素位于 body 底部,但是当找不到非静态父元素时,它的位置会与什么相关,我没有找到相关说明。所以我认为这个问题不同于这个问题。感谢 @Ben Kolya Mansley。
====
我正在编写一个组件,遇到了一个问题。我将一个元素的位置设置为 absolute 并将其附加到 document.body 上(body 的高度大于屏幕的高度),但是它不在 body 的底部,而是在视口的底部。为什么会这样奇怪呢?
我阅读了 position 和 bottom 的 mdn 文档。它说,position 为 absolute 的元素将查找非静态定位的父元素,如果找不到,则相对于 body 定位。
====
我正在编写一个组件,遇到了一个问题。我将一个元素的位置设置为 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>
中。 - treyBakeposition
是static
,所以body
需要position:relative
。而body
并不算作父级元素。 - Paulie_D