Z-Index
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, this value 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 very large number sometimes still loses.
Why it matters
Almost every layering bug you will hit in a page builder comes back to this. A sticky header vanishing behind a section, a dropdown hidden under a hero image, a dialog 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 the value entirely.
-
Set the valueUse a small, deliberate scale, not random large numbers.
-
Check the parentA parent with its own value, or a transform, creates a new stacking context that traps the child.
-
Watch for hidden overflowIt clips children regardless of stacking order.
Agree a scale early
Content 1, sticky header 100, dropdowns 200, dialogs 900. The moment you reach for five nines, you have stopped designing and started fighting.