前端

层级Z-Index

你可能会说

那个弹窗被别的内容挡住了，让它显示在最上面。

定位元素在垂直屏幕轴向上的层叠与覆盖优先级规则。例如，下拉菜单被横幅挡住时，要同时检查菜单和横幅所在的父级；只把 z-index 改成 99999，也可能仍然无效。项目里应使用少量固定层级，避免数字越堆越乱。

也常被叫作层叠顺序层级Z轴层级深度层级

z: 1 z: 2 z: 3

组成结构 · Anatomy

z-index: 1z-index: 2大的在上面

z-index 较小，被压在下面

z-index 较大，盖在上面

用于定位元素，以及 flex/grid 子项的层叠数值；还要看它所在的层叠上下文

常见变体 · Variants

内容叠放1 ~ 10

卡片角标、头像轻微叠压

吸顶导航100

100

固定栏压住滚动内容

浮层1000

页面1000

下拉、气泡、文字提示

弹窗遮罩10000

10000

示例档位：让模态层高于普通页面浮层

典型使用场景

弹窗盖过页面

页面 z-index: 1

遮罩 z-index: 1000

弹窗 z-index: 1001 确认退出登录？

吸顶导航

文档中心 指南 API z-index: 100

同一层叠规则里，导航层级高于滚动内容

下拉菜单浮层

任务列表 进行中 ▾

z-index: 1000

全部

进行中 ✓

已完成

下拉浮在卡片上面，不被盖住也不被裁

右下角悬浮按钮

＋ z-index: 10