Positioning

Control positioning modes with the bundled static, relative, absolute, fixed, and sticky utilities.

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.

<div class="elementor-element relative background-gray-light padding-8 rounded" style="height: 14rem;">
  <div class="absolute padding-4 background-primary text-white rounded" style="top: 1rem; right: 1rem;">
    Top right
  </div>
  <div class="absolute padding-4 background-secondary text-white rounded" style="bottom: 1rem; left: 1rem;">
    Bottom left
  </div>
</div>

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.

<div class="elementor-element overflow-auto border-1 border-solid border-gray rounded-lg" style="height: 20rem;">
  <div class="sticky z-10 background-primary text-white padding-3 font-bold" style="top: 0;">
    Sticky header
  </div>
  <div class="padding-4 space-y-3">
    <div class="padding-3 background-gray-light rounded">
      Item 1
    </div>
    <div class="padding-3 background-gray-light rounded">
      Item 2
    </div>
    <div class="padding-3 background-gray-light rounded">
      Item 3
    </div>
  </div>
</div>

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