Z-index & Stacking
层级与堆叠
Aliases:层级堆叠图层顺序谁盖住谁弹窗被盖住层叠上下文z-indexstacking context
What is it
z-index orders positioned elements on the page, but stacking contexts decide who really wins: once an ancestor gains transform, opacity or isolation, a child's 9999 only competes inside that box and can never beat an outside z-index: 1. Replace scattered magic numbers with one small named ladder.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Dropdowns, tooltips, drawers and modals need a fixed stacking order
- Sticky bars and floating buttons must stay above scrolling content
- When an overlay is hidden, find the stacking context before raising numbers
✕ When not to use
- Treating 9999 as a cure-all and bumping digits when it fails
- Random values — 1, 5, 100, 9999 — with no shared ladder
- Expecting lift from z-index on an element that is not positioned
Variants
Numeric ladder
数字档位
10 / 20 / 40 leave gaps to insert layers later
Named tokens
命名档位
--z-dropdown, --z-modal, --z-toast referenced by purpose
Isolated context
隔离上下文
Parent isolation: isolate traps children locally so values cannot leak
Implementation
z-index: 40position: relativeisolation: isolate--z-modal: 40transform: translateZ(0)z-index only applies to positioned elements, so non-static position comes first. Tokenise the ladder: --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-modal: 40; --z-toast: 60. To trap children locally give a parent isolation: isolate (or an explicit position plus z-index) so a big child number cannot escape. Never fall back to 9999 — leave room to insert layers.
Platform API
z-indexpositionisolationtransformopacityIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | z-index |
| CSS | isolation |
| Tailwind CSS | z-10 / z-50 |
Related concepts
A dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsUsed withA menu of actions popping near its trigger to tuck away secondary operations and keep the interface tidy — the classic form being a "···" more button. The panel floats over content with a shadow; picking an item executes and closes, and destructive actions sit isolated below a divider in red.
ComponentsUsed withA small text bubble that appears briefly on hover, explaining icon buttons, abbreviations or truncated text. Purely informational and non-interactive, it disappears on mouse leave; usually shows after a ~300ms delay to avoid flicker while moving across the screen.
ComponentsUsed withShadow depth expresses how far an element sits from the page: 0 rests flat, 1–2 lift, 3 and above become overlays. Each shadow stacks umbra, penumbra and ambient layers — higher levels mean larger, softer casts. Use elevation to describe stacking relations, never as ornament.
FoundationSimilar