The position property

position decides what an element’s top, right, bottom and left actually mean ~ and whether it stays in the page’s normal flow at all.

The five values

• static ~ the default. Normal flow. top/left do nothing.
• relative ~ nudged from where it would have been. Its original space is still reserved, so nothing else moves.
• absolute ~ removed from the flow, positioned against the nearest ancestor that isn’t static.
• fixed ~ removed from the flow, pinned to the browser window. Doesn’t scroll.
• sticky ~ normal until you scroll past it, then it sticks. Needs a top value to work.

The trick that makes absolute make sense

absolute positions against the nearest positioned ancestor ~ meaning the nearest one with a position other than static. If there isn’t one, it goes all the way up to the page itself, which is rarely what you wanted.

So the pattern is: position: relative on the parent (with no top/left, so it doesn’t actually move), position: absolute on the child. The parent exists purely to be the thing the child measures from.

A warning

If you’re positioning things to build a layout, stop ~ you want Flexbox or Grid. position is for the exceptions: a badge in a corner, a dropdown, a sticky header.