Position Utilities

Position Utilities

Position utilities provide common relative, absolute, fixed, sticky, and edge-positioning patterns without writing custom positioning rules.

Core concept

Explain why an absolutely positioned element normally needs a positioned ancestor, how top/start/end/bottom helpers work, and how fixed and sticky positioning differ from absolute positioning.

Using it in a real interface

Show a notification badge positioned over an avatar, a floating action button, and a sticky header region. Explain stacking context and why z-index may become necessary when positioned elements overlap.

Implementation notes

Do not use absolute positioning for the primary page layout. Reserve it for overlays, badges, decorative layers, and elements whose relationship to a containing block is intentional.