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.

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

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

​
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