Skip to main content

​
Overview

Use z-* utilities to keep stacking order predictable without inventing one-off values. Z-index utilities control which positioned elements sit above others. Higher values paint in front. The bundle ships z-0 through z-100 in steps of 10 so teams can reserve bands for base content, chrome, overlays, and top-most UI without one-off numbers.
ClassValueCSSUsage
.z-00z-index: 0;Base stacking within a context
.z-1010z-index: 10;Low overlays, scrims, local stacking
.z-2020z-index: 20;Content above low overlays
.z-3030z-index: 30;Mid-stack UI
.z-4040z-index: 40;Elevated panels and popovers
.z-5050z-index: 50;Dropdowns, modals, high-priority overlays
.z-6060z-index: 60;Above standard modal surfaces
.z-7070z-index: 70;Reserved for nested layering
.z-8080z-index: 80;Strong emphasis layers
.z-9090z-index: 90;Near-top system UI
.z-100100z-index: 100;Toasts, tooltips, maximum shipped layer

​
Scale Visualization

Higher z-index values render in front of lower ones. Each circle below overlaps the previous one because of its higher z-index.
Elementor limitation: Imported z-* classes only behave reliably when the target element also has non-static positioning—for example .relative, .absolute, .fixed, or .sticky—on the same node you expect to stack. Elementor is set up so z-* must be paired with a position class; z-index alone on position: static will not do what you want. That aligns with CSS (z-index affects positioned boxes), but the practical rule in Elementor is: always ship z-* together with a position utility.In Elementor v4, elementor-element wrappers for atomic elements often already include position: relative from the editor, which can satisfy that requirement for descendants. If z-* seems ignored, add relative (or another non-static position from the bundle) on the element that should establish or join the stacking context.

​
Stacked Cards

A common pattern where cards overlap at increasing z-index values, creating a layered stack effect. 
<div class="elementor-element relative" style="height: 12rem;">
  <div class="absolute z-0 bg-gray rounded-lg p-4" style="top: 1rem; left: 1.5rem; right: 5rem;">
    Base card
  </div>
  <div class="absolute z-10 bg-primary text-white rounded-lg p-4" style="top: 2.5rem; left: 3.5rem; right: 3rem;">
    Middle card
  </div>
  <div class="absolute z-20 bg-cyan text-white rounded-lg p-4" style="top: 4rem; left: 5.5rem; right: 1rem;">
    Top card
  </div>
</div>

​
Overlay Pattern

A background image with a semi-transparent backdrop at z-10 and content above at z-20. This is the foundation for hero sections, modals, and lightboxes. 
<div class="elementor-element relative overflow-hidden rounded-lg" style="height: 12rem;">
  <img alt="Background" class="w-full h-full object-cover" src="hero.jpg"/>
  <div class="absolute z-10 bg-black opacity-50" style="top: 0; right: 0; bottom: 0; left: 0;">
  </div>
  <div class="absolute z-20 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>

​
Examples

<div class="elementor-element fixed z-50 flex items-center justify-center" style="top: 0; right: 0; bottom: 0; left: 0;">
  <div class="bg-white rounded-lg p-6">
    Modal content
  </div>
</div>

<div class="elementor-element relative">
  <button class="btn btn-blue">
    Menu
  </button>
  <div class="absolute z-50 mt-2 bg-white rounded-lg" style="top: 100%; left: 0;">
    Dropdown content
  </div>
</div>

​
Toast Notification

<div class="elementor-element fixed z-100" style="bottom: 1rem; right: 1rem;">
  <div class="bg-black text-white rounded-lg p-4" style="max-width: 20rem;">
    Changes saved successfully.
  </div>
</div>

​
Best Practices

1

Stick to the Shipped Scale

Use the bundled steps from z-0 to z-100 (increments of 10) instead of inventing arbitrary values.
2

Plan Layers Early

Decide which surfaces are base content, overlays, or modal-level UI before assigning classes.
3

Use Position Utilities Together

Z-index only works as intended when the element is also positioned.
4

Keep Stacking Contexts Simple

Deeply nested positioned elements can make layering hard to reason about.

Positioning

Position utilities for z-index to work

Display

Display utilities for layout control

Opacity

Opacity utilities for layered effects

Layout

All layout utilities overview