层级Z-Index
你可能会说
那个弹窗被别的内容挡住了，让它显示在最上面。
定位元素在垂直屏幕轴向上的层叠与覆盖优先级规则。例如，下拉菜单被横幅挡住时，要同时检查菜单和横幅所在的父级；只把 z-index 改成 99999，也可能仍然无效。项目里应使用少量固定层级，避免数字越堆越乱。
先知道
也常被叫作层叠顺序层级Z轴层级深度层级
你可以这样告诉 AI Agent
下拉菜单设了很大的 z-index 仍被卡片裁掉。请先检查父级 overflow、定位和层叠上下文，找到真正限制它的边界后再修，不要继续堆数字。请验证菜单能盖过卡片，但不会压住弹窗和全局导航。
什么时候用
- 弹窗 Modal 盖遮罩、遮罩盖页面：三层各司其职确认删除这个项目？取消确认删除
- 吸顶导航：滚动内容从它底下过导航 · z-index: 100
- 下拉菜单 Dropdown、文字提示 Tooltip 浮在卡片上不被盖住全部状态全部状态进行中
- 为内容、吸顶、浮层和弹窗建立少量统一层级内容 1吸顶 100浮层 1000弹窗 10000
什么时候不用
- 没先确认定位、flex/grid 子项和层叠上下文，只改数字通常没用z-index: 99 但没设 position
- 仅靠增大 z-index 数值解决遮挡：层级规则会失去可维护性z-index: 9999z-index: 99999z-index: 999999
- 指望子元素 z-index 9999 翻出父级：层级逃不出父级的上下文父级 z-index: 1子级 9999z-index: 2
- 用 z-index 解决调一下 DOM 顺序就行的问题代码中较早出现的内容用 z-index 强行改变遮盖顺序若视觉顺序应与文档顺序一致，应先调整 DOM 结构
组成结构 · Anatomy
z-index: 1z-index: 2大的在上面
z-index 较小，被压在下面
z-index 较大，盖在上面
用于定位元素，以及 flex/grid 子项的层叠数值；还要看它所在的层叠上下文
常见变体 · Variants
内容叠放1 ~ 10
12
卡片角标、头像轻微叠压
吸顶导航100
100
固定栏压住滚动内容
浮层1000
页面1000
下拉、气泡、文字提示
弹窗遮罩10000
10000
示例档位：让模态层高于普通页面浮层
典型使用场景
弹窗盖过页面
吸顶导航
同一层叠规则里，导航层级高于滚动内容
下拉菜单浮层
任务列表
进行中 ▾
下拉浮在卡片上面，不被盖住也不被裁
右下角悬浮按钮
延伸阅读 · 权威出处
快速练习