Frontend

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.

z: 1 z: 2 z: 3

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

The card corner mark and avatar are slightly overlaid.

100

Fixed bar suppresses scrolling content

1000

Page1000

Drop-down, bubble, text prompt

10000

Example gear: Make the modal layer higher than the ordinary page floating layer

Typical use cases

Dropdown layer

Page z-index: 1

Mask z-index: 1000

Pop-up z-index: 1001 Confirm to log out?

Sticky header

Document Center Guidelines API z-index: 100

In the same cascading rule, the navigation level is higher than the scrolling content

Modal

Task list In progress ▾

z-index: 1000

All

In progress ✓

Completed

The drop-down floats on top of the card and is neither covered nor cut

Tooltip

＋ z-index: 10