Position sets how an element is placed: static flow, relative offset, absolute within a parent, fixed to the viewport, or sticky on scroll.
When to use
Badges on avatars, dropdowns, modals, sticky headers, and tooltips all rely on non-static positioning.
Core concepts
- static keeps normal document flow. Offsets have no effect.
- relative stays in flow but can shift visually with top/left.
- absolute removes the element from flow and anchors to a positioned ancestor.
- top, right, bottom, and left accept length, percentage, or auto.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Corner badge
relativeParent needs position: relative. Child uses absolute + inset offsets, try top-2 right-2 on the badge.
Sticky section header
sticky top-0 z-10 bg-background/90 backdrop-blur-smSticks within its scroll container. Pair with a solid or blurred background so content doesn't show through.
Summary
- position defines whether an element stays in normal flow and what its containing block is for offset properties.
- relative keeps flow but allows nudging with top/left. Useful for badges and minor visual offsets.
- absolute removes the element from flow and anchors to the nearest ancestor with position other than static.
- A positioned ancestor (usually position: relative on the parent) is required for absolute children to land predictably.
- z-index only competes within the same stacking context. Creating one with position + z-index isolates layers.