Position lets you take elements out of normal flow when you need overlays: badges on cards, dropdown panels, sticky headers, and modal backdrops. Used carelessly, it causes invisible overlaps and broken mobile layouts.
Quick reference
static— default; layout in normal flow.relative— stays in flow; creates an offset box and a positioning context for children.absolute— removed from flow; positioned against the nearest ancestor with non-static position (or the viewport).fixed— like absolute, but anchored to the viewport (watch mobile browser chrome).sticky— hybrid; acts relative until a scroll threshold, then fixed within its container.
HTML + CSS pattern: badge on a card
Wrap the card in position: relative and place the badge with position: absolute; top; right. The HTML stays a simple article; CSS handles placement.
Practice flow
- Run the playground and note badge placement.
- Remove
position: relativefrom the card—watch the badge jump to another ancestor. - Add
position: sticky; top: 0to the header bar and scroll the page content.
Challenge
Anchor a notification dot
- Add a
.doton the avatar withposition: absolute. - Place it at
top: 0; right: 0with a red background.
Done when: the dot stays on the avatar corner when you resize the preview.
Go deeper — Containing blocks and containing layout (intermediate / experienced)
Absolutely positioned elements resolve against a containing block. For absolute, that is the nearest ancestor with transform, filter, perspective, or non-static position—not always the element you expect. In interviews, mention you verify in DevTools → Computed → position and scroll the ancestor chain.
fixed descendants can become relative to a transformed parent in modern browsers—another reason to keep transform on a deliberate wrapper.
Pitfalls
- Using absolute positioning for entire page layout instead of flex/grid.
- Forgetting to set a positioned ancestor, so overlays attach to the viewport.
- Tiny click targets on absolutely positioned icons without padding.