Z-Index
You might say
This dialog is getting covered by other content. Make sure it stays on top.
Control which overlapping layer appears on topZ-index affects the stacking order of positioned elements inside a stacking context. A larger number does not always escape its parent. Define a short layer scale for content, sticky UI, menus, overlays, and dialogs instead of solving each overlap with a larger random number.
Know first
When to use it
- Keep a dropdown above nearby contentDelete this project?CancelDelete
- Place a dialog above its backdrop
- Order sticky and floating elements
- Create a shared layer scale
When NOT to use it
- Keep increasing the number without checking the stacking context
- Give every component its own arbitrary z-index
- Place ordinary content above a modal
- Use layering to hide a layout or clipping problem
Anatomy
z-index: 1z-index: 2The big one is on top
The z-index is small and is suppressed below.
The z-index is larger and covers it.
The stacking value used to position elements and flex/grid items; it also depends on the stacking context in which it is located.
Variants
1 ~ 10
12
The card corner mark and avatar are slightly overlaid.
100
100
Fixed bar suppresses scrolling content
1000
Page1000
Drop-down, bubble, text prompt
10000
10000
Example gear: Make the modal layer higher than the ordinary page floating layer
Typical use cases
Dropdown layer
Sticky header
In the same cascading rule, the navigation level is higher than the scrolling content
Modal
Task list
In progress ▾
The drop-down floats on top of the card and is neither covered nor cut
Tooltip
Further reading