模态框z-index不能写死数字，因缺乏语义和约束易引发冲突；须用:root自定义属性统一声明--z-modal、--z-modal-overlay等变量，并确保遮罩与内容同挂body下、共属同一层叠上下文。
模态框 z-index 为什么不能写死数字
写死 z-index: 120 看似简单，但一旦页面里出现 Toast、下拉菜单、全屏编辑器或第三方 SDK（比如富文本工具栏），它们的 z-index 很可能和你冲突——不是盖不住，就是被盖住，调试时翻遍 CSS 才发现是别人偷偷设了 z-index: 999。
根本问题不在数值本身，而在于缺乏语义和约束：你无法一眼看出这个 120 是“模态框”还是“遮罩层”，也没法批量调整所有模态框层级。
必须用 :root + 自定义属性声明统一变量
在 :root 中定义语义化变量，而不是散落在各个组件里：
:root {
--z-modal: 120;
--z-modal-overlay: 110;
--z-modal-header: 125;
}
这样做的好处是：改一个值，所有引用它的模态框自动对齐；团队成员看到 var(--z-modal) 就知道这是主内容层，不用猜 120 的含义。
-
--z-modal-overlay必须比--z-modal小，否则遮罩盖不住内容 - 别把遮罩和内容塞进同一个
z-index值，它们属于不同功能层 - 避免用
!important覆盖，那等于放弃变量管理权
模态框结构中如何正确应用这些变量
变量不会自动生效，必须显式写进每个相关元素的 z-index 声明里：
.modal-overlay {
z-index: var(--z-modal-overlay);
}
.modal-content {
z-index: var(--z-modal);
}
.modal-header {
z-index: var(--z-modal-header);
}
注意两点：
- 不要只给
.modal根容器设z-index，内部子元素（如关闭按钮、标题）若没明确层级，仍可能被遮挡 - 如果用了
transform或opacity ，会创建新的堆叠上下文——此时 <code>.modal-content的z-index只在它自己的上下文内有效，外部遮罩层必须在更高一级上下文中设置
容易被忽略的堆叠上下文陷阱
即使变量设对了，.modal 仍可能被其他元素压住，常见原因：
- 父容器（比如
#app）设置了transform: translateZ(0)或will-change: transform，意外创建了新堆叠上下文，把整个模态框锁死在局部层级里 -
.modal-overlay和.modal-content不在同一个父级下（例如遮罩是 body 直接子元素，内容是某个 div 子元素），导致它们分属不同堆叠上下文，z-index数值再大也无效 - 使用了
<dialog></dialog>元素却没加showModal()，浏览器不会自动提升其堆叠层级，仍需手动设z-index
最稳妥的做法：确保遮罩层和模态框内容都挂载到 body 下，且共用同一祖先（比如一个 div#modals），再统一用变量控制层级。否则变量只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
