Skip to main content

​
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.
ClassCSSUsage
.staticposition: static;Default document flow
.relativeposition: relative;Anchor child overlays
.absoluteposition: absolute;Remove from normal flow
.fixedposition: fixed;Lock to the viewport
.stickyposition: 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 bg-gray-light p-8 rounded" style="height: 14rem;">
  <div class="absolute p-4 bg-purple text-white rounded" style="top: 1rem; right: 1rem;">
    Top right
  </div>
  <div class="absolute p-4 bg-cyan text-white rounded" style="bottom: 1rem; left: 1rem;">
    Bottom left
  </div>
</div>

​
Overlay Pattern

<div class="elementor-element relative">
  <img alt="Background image" class="w-full object-cover rounded-lg" src="image.jpg" style="height: 16rem;"/>
  <div class="absolute bg-black opacity-50 rounded-lg" style="top: 0; right: 0; bottom: 0; left: 0;">
  </div>
  <div class="absolute flex items-center justify-center" style="top: 0; right: 0; bottom: 0; left: 0;">
    <h2 class="text-white text-2xl font-bold">
      Overlay Text
    </h2>
  </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 bg-primary text-white p-3 font-bold" style="top: 0;">
    Sticky header
  </div>
  <div class="p-4 space-y-3">
    <div class="p-3 bg-gray-light rounded">
      Item 1
    </div>
    <div class="p-3 bg-gray-light rounded">
      Item 2
    </div>
    <div class="p-3 bg-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.

​
Fixed Header

<header class="fixed z-50 bg-white" style="top: 0; left: 0; right: 0; border-bottom: 1px solid #e5e7eb;">
  <div class="flex items-center justify-between p-4">
    <h1 class="text-xl font-bold">
      Logo
    </h1>
    <nav class="flex gap-6">
      <a class="text-gray" href="#">
        Home
      </a>
      <a class="text-gray" href="#">
        About
      </a>
    </nav>
  </div>
</header>

​
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.

Z-Index

Control stacking order of positioned elements

Layout

Display utilities for positioning patterns

Spacing

Margin and padding around positioned elements

Opacity

Opacity utilities for layered interfaces