update: After some research, I discovered that adding a position: relative; to the body element will cause the element to be positioned at the bottom of the body. However, I did not find any information on what happens when a non-static parent is not found - what would the position then be relative to? Therefore, I believe this question is not a duplicate of this one. Special thanks to @Ben Kolya Mansley for their input.
====
While working on a component, I encountered an issue. I set an element's position to absolute and bottom to 0, and appended it to the document.body (which has a height greater than the screen's height), but instead of being at the bottom of the body, it is positioned at the bottom of the viewport. Why does this happen?
I consulted the MDN documentation on position and bottom properties. It states that an element with position absolute will seek a non-static positioned parent, and if none is found, it will be positioned relative to the 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>