Overview
The framework ships positioning modes, not a full offset utility system. Use the position classes to establish layout behavior, then add offsets with custom CSS or inline styles when a design needs exact placement.| Class | CSS | Usage |
|---|---|---|
.static | position: static; | Default document flow |
.relative | position: relative; | Anchor child overlays |
.absolute | position: absolute; | Remove from normal flow |
.fixed | position: fixed; | Lock to the viewport |
.sticky | position: sticky; | Stick while scrolling |
Relative and Absolute
.relative on a parent creates a positioning context. .absolute on a child removes it from normal flow and positions it relative to that parent. This is the core pattern for overlays, badges, and pinned elements.
Sticky
.sticky keeps an element in normal flow until the user scrolls past a threshold, then pins it. This is useful for section headers, sidebar navigation, and toolbar strips.
Fixed
.fixed locks an element to the viewport. It stays in place regardless of scrolling. Use it for sticky headers, floating action buttons, and modal backdrops.
Z-Index
Z-Index Documentation
For the full layering scale and stacking examples, see the Z-Index page.
Best Practices
Choose the Right Position Type
Use
static for normal flow, relative for anchoring, absolute for overlays, fixed for viewport-level UI, and sticky for scroll-aware sections.Add Offsets Explicitly
Since the bundle does not ship
top-*, left-*, right-*, bottom-*, or inset-*, add exact offsets with custom CSS when needed.Related Utilities
Z-Index
Control stacking order of positioned elements
Layout
Display utilities for positioning patterns