Positioning
Relative, absolute, sticky & fixed — composed with role tokens so overlays read in light and dark alike.
position: absolute
Absolute overlays
A relatively-positioned parent anchors badges, ribbons & status dots.
−40%top / rightAperture Desk Lamp
$129.00
AS
Ava SuttonOnline
inset + transform
Dead-center overlay
A media frame with a centered play affordance and a top ribbon.
position: sticky
Sticky section headers
Scroll this list — each group label pins to the top of its scroll box.
A
ABAisha Bello
ASAva Sutton
AGAperture Goods
B
BRBrightway Retail
BTBrass Task Light
C
CRCamila Rossi
C&Cedar & Co.
CDCork Desk Mat
D
DCDaniel Cho
DODevon Okafor
E
ELErik Lindqvist
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 patternA 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.
basez-index: 0
cardz-index: 1
popoverz-index: 2
toastz-index: 3