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.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
1
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.2
Add Offsets Explicitly
Since the bundle does not ship
top-*, left-*, right-*, bottom-*, or inset-*, add exact offsets with custom CSS when needed.3
Combine With Z-Index
Layered interfaces usually need both positioning and z-index utilities.
4
Test Sticky and Fixed UI Carefully
These patterns are easy to overuse and can become awkward on smaller screens.
Related Utilities
Z-Index
Control stacking order of positioned elements
Layout
Display utilities for positioning patterns