Stacking context
A local stacking world created by certain CSS properties.
Platform under construction
Z-index
z-index controls stacking order when elements overlap. It works only within stacking context rules, which is where many CSS surprises begin.
:root {
--z-header: 10;
--z-modal: 100;
}
Layout
z-index is stacking order, not a magic bring-to-front button.
z-index affects how overlapping elements stack along the visual z-axis. But it only applies in certain layout conditions and within stacking contexts.
A stacking context is like a local layer group. An element inside one context cannot always jump above elements in another context just by using a huge number.
Professional CSS uses small z-index scales for headers, dropdowns, modals and overlays instead of random values like 999999.
Positioned element
z-index commonly works with positioned elements.
Layer scale
Named z-index tokens keep order predictable.
Huge values
Large numbers often hide a misunderstanding of context.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
z: 0
Normal content layer.
z: 10
Persistent navigation layer.
z: 30
Temporary menu layer.
z: 100
Top interaction layer.
Examples
Use the layout tool that matches the shape of the problem.
Named layer scale
:root {
--z-header: 10;
--z-dropdown: 30;
--z-modal: 100;
}
Random z-index arms race
.menu { z-index: 9999; }
.modal { z-index: 99999; }
.tooltip { z-index: 999999999; }
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Understand stacking context
A higher number only wins inside the relevant context.
Use a scale
Small named z-index values are easier to reason about.
Avoid huge numbers
They are usually a symptom, not a solution.
Know context triggers
position, opacity, transform and isolation can affect stacking.
Keep overlays centralized
Modals and dropdowns should follow a shared layer system.
Debug with DevTools
Inspect stacking contexts instead of guessing numbers.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
z-index bugs create hidden controls, broken menus and confusing overlays. A layer system keeps interactions predictable.
Accessibility
Overlays must not trap or hide focus incorrectly. Layering should support keyboard and screen reader behavior.
Production note
Define z-index tokens for common layers and avoid component-level number battles.
SEO note
Content hidden behind overlays or headers can damage usability, especially on mobile.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Set --z-modal to 1 and observe the stack.
- Give .stage transform: translateZ(0) and discuss stacking context.
- Replace z-index tokens with huge numbers and explain why it is worse.
Practice assignment
Do this before moving to the next lesson.
- Create three overlapping boxes.
- Use z-index tokens to control their order.
- Explain why one huge number is not architecture.
Try it yourself
Build a simple layer scale
Self-check
Before you continue, prove that you understand Z-index.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain stacking context in simple words?
- Can you create a small z-index scale?
- Can you avoid huge z-index values?
- Can you identify when z-index does not work as expected?
- Can you think about focus and overlays together?
Senior audit upgrade
Debug stacking context before raising the number.
A higher z-index cannot escape every stacking context. First find which ancestor created the stacking context.
Common causes
position with z-index, transform, opacity below 1, filter, isolation and some contain values can create contexts.
Inspect ancestors
Check parents before changing the child z-index.
Layer tokens
Use named z-index tokens for nav, overlay, modal and toast layers.