Positioning

Relative, absolute, sticky & fixed — composed with role tokens so overlays read in light and dark alike.

Helpers Breakpoints
position: absolute

Absolute overlays

A relatively-positioned parent anchors badges, ribbons & status dots.

−40% top / right Aperture Desk Lamp
$129.00
AS
Ava Sutton Online
inset + transform

Dead-center overlay

A media frame with a centered play affordance and a top ribbon.

FEATURED Vireo in 90 seconds
position: sticky

Sticky section headers

Scroll this list — each group label pins to the top of its scroll box.

position: fixed

Fixed toast & FAB

Pinned to the viewport, above all content. Trigger the live examples.

Fixed elements ignore scroll and sit relative to the viewport — used for toasts, FABs and the mobile sidebar overlay.

Appears bottom-right for ~3s.
FAB pattern A floating action button anchors to a corner — shown here within the card via absolute, fixed in production.
z-index

Stacking order

Overlapping layers prove the painting order — later siblings with higher z sit on top.