层级与堆叠
Z-index & Stacking
别名:层级堆叠图层顺序谁盖住谁弹窗被盖住层叠上下文z-indexstacking context
这是什么
用 z-index 决定已定位元素在纸面上的前后顺序，但真正说话的是层叠上下文：一旦祖先把 transform、opacity 或 isolation 变成上下文， 子元素的 9999 就只在这个盒子里有效，永远压不过外面的 z-index: 1。与其到处写魔法数字，不如定一套从小到大的命名档位。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 下拉、气泡、抽屉、模态需要固定的前后叠放次序
- 吸顶导航与浮动按钮要始终压在滚动内容之上
- 调试“弹窗被遮住”时先定位层叠上下文，再谈数值
✕ 不适用场景
- 把 z-index 9999 当万能药，出问题就再加一位
- 没有档位体系，1、5、100、9999 随手混用
- 元素只想视觉浮起，却忘了它既没定位也没上下文
常见形式
数字档位
Numeric ladder
10 / 20 / 40 留出插队空隙，够用且仍可读
命名档位
Named tokens
--z-dropdown、--z-modal、--z-toast，按用途引用
隔离上下文
Isolated context
父级 isolation: isolate，把子元素锁在局部，数值不外泄
实现要点
z-index: 40position: relativeisolation: isolate--z-modal: 40transform: translateZ(0)先保证定位（position 非 static），z-index 才生效。把档位做成令牌：--z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-modal: 40; --z-toast: 60。需要把子元素锁在局部时给父级 isolation: isolate（或明确的 position 与 z-index）， 避免子元素的大数值越级。不要用 9999 兜底，档位之间留出插队空间。
平台 API
z-indexpositionisolationtransformopacity代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | z-index |
| CSS | isolation |
| Tailwind CSS | z-10 / z-50 |
相关概念
覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件搭配使用由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件搭配使用悬停在元素上短暂出现的小型文字气泡，用来解释图标按钮、缩写或被截断的文本。 纯提示、不可交互，移开即消失；通常延迟约 300ms 出现以避免扫过时闪烁。
组件搭配使用用阴影的深浅表达元素离纸面的远近：0 贴平、1～2 浮起、3 以上成浮层。一套阴影由本影、半影、环境三层叠加而成，档位越高投影越大越淡。层级只用来表达叠放关系，不要拿它当装饰。
基础相似概念