position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
please clarify 
if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
help, please
Absolute positioned elements are removed from the normal flow, and can overlap elements.
lost here too
help!
many thanks!
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 top, bottom, left, 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:
<div class="ancestor">
<div class="child">
</div>
</div>
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.
<div class="ancestor1" style="position: sticky">
<div class="ancestor2">
<div class="child" style="position: absolute">
</div>
</div>
</div>
In this case, while the closest ancestor of child is 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 z-index.
Finally, here’s a good article on it.
I hope this helps!