Elementor
Z
Z-Index
Definition
Z-index controls which overlapping element appears in front — the stacking order of a page along its invisible depth axis.
In plain English
A page has width, height, and a third axis running toward you. When two elements overlap, z-index decides which one wins. Higher number, closer to the viewer.
The catch: it only works on positioned elements, and it only competes within its own stacking context — which is why a z-index of 9999 sometimes still loses.
Why it matters
Almost every layering bug you'll hit in a page builder is a z-index problem. A sticky header vanishing behind a section, a dropdown hidden under a hero image, a modal trapped beneath the footer.
All the same fix, once you know where to look.
How it works
- Give the element a positionrelative, absolute, fixed or sticky. A static element ignores z-index entirely.
- Set a z-indexUse a small, deliberate scale — not random large numbers.
- Check the parentA parent with its own z-index or a transform creates a new stacking context that traps the child.
- Watch for overflow:hiddenIt clips children regardless of stacking order.
Agree a scale early
Content 1, sticky header 100, dropdowns 200, modals 900. The moment you type 99999, you've stopped designing and started fighting.
Watch it in a real build
Related terms
Tip: use ← and → to move between entries.
The Friday email
One email a week. The thing I'd tell you over coffee.
What changed in WordPress and AI that week, what I'd actually use, and what I'd ignore. Written by me, not summarised by a tool.
- New tutorials the moment they're published
- Honest verdicts on tools — including the ones I dropped
- No sequences, no upsells, one click to leave
Free, forever, no signup
Pick a starting point. Have something real by tonight.
Every tutorial is free, complete, and built in real time — including the bits that break. Start where you are, not where a course thinks you should be.