弹窗层级管理应通过css自定义属性绑定bem语义化类名实现，而非堆砌z-index数值；需用fixed定位隔离层叠上下文，并确保dom结构与定位链严格匹配。
弹窗的层级管理不是靠堆 z-index 数值，而是靠 BEM 类名绑定语义化层级常量，再配合固定定位与层叠上下文隔离来实现稳定叠加。
为什么不能在 .dialog__overlay 里直接写 z-index: 1000
BEM 类名描述的是组件结构和语义，不是全局层叠策略。z-index 是跨组件协作信号——它决定“谁浮在谁上面”，而不是“这个遮罩长什么样”。直接写死数值会导致：
- Modal 拉高后，Dropdown 或 Tooltip 被压住，但没人知道该调谁
- 第三方库（如 Ant Design 的
.ant-modal）和你自己的.dialog层级冲突，样式打架 - 后续加 Toast、Drawer 时，每个都拍一个新数字，很快突破 9999，维护崩溃
如何用 CSS 自定义属性 + BEM 绑定语义层级
把层级抽象成带业务含义的变量，再由 Block 类名显式声明其归属：
:root {
--z-dialog: 1000;
--z-dropdown: 900;
--z-toast: 700;
}
<p>.dialog { z-index: var(--z-dialog); }
.dropdown { z-index: var(--z-dropdown); }
.toast { z-index: var(--z-toast); }
</p>
这样做的实际好处是：
-
.dialog这个类名本身就在说：“我属于弹窗层级”——别人一眼能懂，不用翻文档 - 所有数值收口在
:root，改一个地方，全站浮动组件同步更新 -
.dialog__overlay可以安全用calc(var(--z-dialog) - 1)，不脱离体系
为什么 .dialog__overlay 必须用 position: fixed 而不是依赖父级 z-index
只要父元素用了 transform、opacity 或 <code>will-change，就会创建新的层叠上下文。此时子元素的 z-index 只在该上下文内生效，再大也出不去。
所以 .dialog__overlay 必须硬写：
.dialog__overlay {
position: fixed;
inset: 0;
/* 不加 transform，不依赖父级定位 */
}
而内容区 .dialog__content 若需动画（如 transform: scale(0.95)），它的 z-index 必须提前设在 .dialog 根节点上，而不是自己身上——否则一加 transform，就自动被锁进新层叠上下文，永远盖不住 .dialog__overlay。
调试时发现遮罩没盖住内容？先查这三点
这不是 class 名写错了，而是结构或定位链断了：
- 检查
.dialog__overlay和.dialog__content是否平级嵌套在.dialog内——不能是.dialog__content > .dialog__overlay - 确认
.dialog根节点有没有设position: relative或其他触发层叠上下文的属性（它不该触发） - 用浏览器开发者工具看 computed
z-index，如果显示auto，说明该元素根本没参与层叠上下文竞争
真正难的不是算对数字，而是让 z-index 的语义、DOM 结构、CSS 定位三者咬合严丝合缝——少一个，就漏一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
