←→ 切换·Esc 返回

层级Z-Index

样式与布局基础
控制重叠元素谁显示在上面
先知道
定位 Position

弹窗、菜单和提示层互相重叠时，z-index 用来决定同一层叠范围内的前后顺序。数字更大不一定能越过父元素；加到很大仍没用时，先检查父级和层叠上下文。

z: 1 z: 2 z: 3

什么时候用

  • 弹窗 Modal 盖遮罩、遮罩盖页面：三层各司其职
    确认删除这个项目？
    取消确认删除
  • 吸顶导航：滚动内容从它底下过
    导航 · z-index: 100
  • 下拉菜单 Dropdown、文字提示 Tooltip 浮在卡片上不被盖住
    全部状态全部状态进行中
  • 为内容、吸顶、浮层和弹窗建立少量统一层级
    内容 1吸顶 100浮层 1000弹窗 10000

什么时候不用

  • 没先确认定位、flex/grid 子项和层叠上下文，只改数字通常没用
    z-index: 99 但没设 position
  • 压不过就加 9：9999 军备竞赛，最后谁也管不住
    z-index: 9999z-index: 99999z-index: 999999
  • 指望子元素 z-index 9999 翻出父级：层级逃不出父级的上下文
    父级 z-index: 1子级 9999z-index: 2
  • 用 z-index 解决调一下 DOM 顺序就行的问题
    代码里写在前面的内容硬用 z-index 压回前面调一下 DOM 顺序就行，别动用 z-index
组成结构 · Anatomy
z-index: 1z-index: 2大的在上面
1下层元素Bottomz-index 较小，被压在下面
2上层元素Topz-index 较大，盖在上面
3层级值Z-Index用于定位元素，以及 flex/grid 子项的层叠数值；还要看它所在的层叠上下文
常见变体 · Variants
内容叠放1 ~ 10
12
卡片角标、头像轻微叠压
吸顶导航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