position: absolute — Out of Flow
Absolute removes an element from normal flow and pins it to its nearest positioned ancestor. The result: badges, tooltips, dropdowns, and overlays.
Step 1 of 4
Absolute leaves the queue
position: absolute removes the element from normal flow entirely. The space it would have taken collapses — sibling elements act as if it were not there.
The element is then placed using top, right, bottom, left — but measured from where? The nearest positioned ancestor. A 'positioned ancestor' is any parent up the tree whose position is relative, absolute, fixed, or sticky. If there is no such ancestor, the element is positioned relative to the viewport.
Think of it this way: Absolute is the sticker you peel off and slap onto the page. Once stuck, it floats above everything else. Where it sticks depends on which surface (positioned parent) is right under your hand.
Learn more on MDN
HTMLREAD ONLY
PREVIEW