Why Positioning Matters
Modals. Sticky headers. Tooltips. Dropdowns. Floating chat bubbles. None of these are possible with normal flow alone — positioning is the CSS escape hatch that builds them.
Normal flow is a polite queue
Most of the time, the browser arranges elements in normal flow: each block sits below the one before it, each inline word next to the previous word. It is calm, predictable, and exactly right for the body of an article.
But what about a navbar that sticks to the top when you scroll? A modal that hovers over the page? A tooltip that appears next to a hovered icon? A 'New' badge in the corner of a card? None of those follow the queue. They live on top of or outside normal flow.
The position property is the escape hatch that lets you take an element out of the queue and place it anywhere you want.
Reach for positioning when normal flow cannot do the job. If a layout works with flexbox or grid, prefer those — positioning is for elements that genuinely need to escape the flow.