overlay pattern (z-10 backdrop + z-20 content)

Overlay Text z-20 above z-10 backdrop

; }; ## 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. ```html theme={null}

Base card

Middle card

Top card

``` ## 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. ```html theme={null}

Overlay Text

``` ## Best Practices Use the bundled steps from `z-0` to `z-100` (increments of 10) instead of inventing arbitrary values. Decide which surfaces are base content, overlays, or modal-level UI before assigning classes. Z-index only works as intended when the element is also positioned. Deeply nested positioned elements can make layering hard to reason about. ## Related Utilities Position utilities for z-index to work Display utilities for layout control