更新：我知道添加一个位置：相对；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>
{
async function foo() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 500)
})
}
async function bar() {
await foo()
console.info('foo done')
}
bar()
}
我在 chrome devtools 源选项卡中打开一个片段，并将上面的代码放入其中。但是我不能为此设置任何断点。只有在代码中没有 async/await 函数时才能添加断点。
更重要的是，我从未在 chrome devtools 中成功调试过任何异步/等待代码。有时添加的断点移动到错误的位置，有时代码在没有断点的地方暂停。
是chrome的bug吗？