应使用语义化less变量管理z-index，如@z-modal: 500;，禁止硬编码数字；通过整百数值预留微调空间，双短横线标识衍生层级，嵌套作用域隔离组件内相对层级，并用断言和ci检测保障一致性。
z-index 值为什么不能硬编码
硬写 z-index: 9999 或 z-index: 100 看似快，实际会让后续调整变成噩梦：组件叠加错乱、Modal 被遮挡、Tooltip 消失——问题总在联调时爆发。根本原因是 z-index 缺乏语义和约束，不同模块各自为政，数值冲突不可避免。
Less 本身不提供运行时层级校验，但能靠变量 + 嵌套 + 作用域把混乱收束成一张可读、可查、可继承的映射表。
用 Less 变量定义语义化层级常量
不要用数字命名变量（如 @z1、@z2），而要绑定 UI 角色。层级顺序必须反映真实渲染逻辑：底层 → 中层 → 浮层 → 弹窗 → 全局覆盖。
@z-overlay: 100; @z-tooltip: 200; @z-dropdown: 300; @z-modal-backdrop: 400; @z-modal: 500; @z-toast: 600; @z-global-overlay: 900;
- 所有值为整百数，留出间隙供局部微调（比如
@z-dropdown--submenu: @z-dropdown + 10） - 用双短横线
--表示衍生层级，避免新建顶层变量 - 禁止在样式规则中直接写数字，只允许引用变量
用嵌套作用域隔离组件层级范围
单页应用里，一个 .header 内部可能有下拉菜单、搜索建议、通知角标——它们之间需要相对层级，但不应干扰全局 @z-dropdown。这时靠 Less 的嵌套 + 变量重定义实现“作用域内层级缩放”。
.header {
z-index: @z-overlay;
<p>&__dropdown {
z-index: @z-dropdown;
}</p><p>&__suggestion {
// 在 header 上下文中，它应浮于 dropdown 之上，但不突破全局 modal 层
z-index: @z-dropdown + 5;
}
}</p>
- 局部增量必须基于已有语义变量，而非凭空加 1/2/3
- 超过
@z-modal的局部提升（如+100）属于危险信号，应触发设计复核 - 避免跨作用域引用（例如在
.sidebar里用@z-header__suggestion），保持边界清晰
如何检测 z-index 冲突与遗漏
Less 编译器不会报错，但可通过两类手段提前暴露问题：
- 在根文件末尾加断言检查：
// 确保 modal 总高于 backdrop .@{z-modal} > @{z-modal-backdrop} { /* 编译失败即说明值反了 */ }（实际用注释+人工核对更可靠） - 导出 JSON 映射表供 QA 或可视化工具消费：
// build/z-index-map.json（需构建脚本提取） { "overlay": 100, "tooltip": 200, "modal": 500 } - CI 阶段 grep 所有
z-index:声明，强制匹配@z-变量名，拦截硬编码漏网之鱼
真正的维护成本不在定义，而在每次新增组件时是否愿意花 30 秒翻一次 z-index.less 文件——那几行变量就是唯一真相源，别让它被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
