Normal flow preserves document order
Block content stacks and inline content follows the writing direction. This default adapts naturally when text wraps or content grows, which makes it a reliable starting point for responsive pages.
Positioning changes the relationship
Relative positioning creates an anchor without removing the element from flow. Absolute positioning removes it from normal space, fixed attaches it to the viewport, and sticky switches behavior as its scroll boundary is reached.
A familiar example
Placing a badge on a card
- Keep the card in the grid's normal flow.
- Make the card a positioned anchor.
- Absolutely position the small badge within the card without using positioning for the card's main content.
What to remember
- Start with normal flow.
- Absolute elements do not reserve layout space.
- Use positioning for real overlays or anchored controls, not basic page structure.