Z-Index - Skelementor

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.

Class	Value	CSS	Usage
`.z-0`	0	`z-index: 0;`	Base stacking within a context
`.z-10`	10	`z-index: 10;`	Low overlays, scrims, local stacking
`.z-20`	20	`z-index: 20;`	Content above low overlays
`.z-30`	30	`z-index: 30;`	Mid-stack UI
`.z-40`	40	`z-index: 40;`	Elevated panels and popovers
`.z-50`	50	`z-index: 50;`	Dropdowns, modals, high-priority overlays
`.z-60`	60	`z-index: 60;`	Above standard modal surfaces
`.z-70`	70	`z-index: 70;`	Reserved for nested layering
`.z-80`	80	`z-index: 80;`	Strong emphasis layers
`.z-90`	90	`z-index: 90;`	Near-top system UI
`.z-100`	100	`z-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 background-gray rounded-lg padding-4" style="top: 1rem; left: 1.5rem; right: 5rem;">
    Base card
  </div>
  <div class="absolute z-10 background-primary text-white rounded-lg padding-4" style="top: 2.5rem; left: 3.5rem; right: 3rem;">
    Middle card
  </div>
  <div class="absolute z-20 background-secondary text-white rounded-lg padding-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="width-full height-full object-cover" src="hero.jpg"/>
  <div class="absolute z-10 background-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>

Best Practices

Stick to the Shipped Scale

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

Plan Layers Early

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

Use Position Utilities Together

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

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

​Overview

​Scale Visualization

​Stacked Cards

​Overlay Pattern

​Best Practices

​Related Utilities