An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Absolute positioned elements are removed from the normal flow, and can overlap elements.
lost here too
An element with
position: absolute is removed from the normal flow of the page, which means that there’s isn’t any space created for it. That means you have to set its position using the properties
right. Instead of its position being based on the screen (i.e.
top: 50px would mean 50px from the top of the screen, which is why
fixed elements don’t move with the rest of the page when you scroll), an element with
position: absolute’s position is relative to its nearest positioned ancestor. An ancestor is an element that contains the one that you’re positioning:
By positioned ancestor, it simply means one that has its position as something other than
position: static. If an element doesn’t have any positioned ancestors, then it’ll use the document body, which means it’ll use the
<body> tags as a reference point.
Closest ancestor vs closest positioned ancestor
<div class="ancestor1" style="position: sticky">
<div class="child" style="position: absolute">
In this case, while the closest ancestor of
ancestor2, it isn’t positioned, which means that the position of
child will actually be based on
ancestor1, which is its closest positioned ancestor.
Lastly, being removed from the normal flow means there’s no space created for it, and it means that it can take up space that’s also being used by another element; which one is seen is dictated by whichever element has a higher
Finally, here’s a good article on it.
I hope this helps!