直接写 z-index 数字会导致层级失控，因组件各自定义、数值无序、协作冲突；应通过预定义语义化变量（如 @z-modal）、统一导入、禁止裸数字和动态函数来强制约束。
为什么直接写 z-index 数字会出问题？
硬编码 z-index: 999 或 z-index: 9999 看似简单，实际导致层级失控：不同组件各自定义、数值跳跃无规律、协作时频繁冲突。Less 本身不提供运行时层级校验，但能用变量 + 嵌套 + 作用域约束来强制统一源头。
- 所有
z-index值必须来自同一组预定义变量，禁止裸数字 - 变量命名需反映语义（如
@z-modal、@z-dropdown），而非“高/中/低”这种模糊描述 - 不同模块引入同一
z-index文件，避免复制粘贴导致值漂移 - 若需动态叠加（如弹窗内再开下拉），用
@z-modal + @z-dropdown计算，而非凭空加 1
怎样用 Less 变量分层管理 z-index？
核心是建立一个 _zindex.less 文件，只定义变量，不写样式：
@z-base: 0; @z-tooltip: 100; @z-dropdown: 200; @z-sticky: 300; @z-header: 400; @z-modal: 500; @z-overlay: 600; @z-toast: 700; @z-fullscreen: 9999;
- 数值间隔留足余量（建议至少 100），避免后续插入新层级时要重排全部
-
@z-base必须存在，作为所有绝对定位元素的默认起点，防止意外浮起 - 避免使用
@z-low/@z-high这类抽象名——它们在多人协作中极易被误读或覆盖
如何防止组件间 z-index 冲突？
关键不是“谁更高”，而是“谁有权决定层级”。Less 没有运行时检查，所以靠结构约束：
- 所有组件样式文件顶部统一
@import "zindex";，禁用相对路径或重复导入 - 组件内部只用
z-index: @z-dropdown;，禁止z-index: @z-dropdown + 1;（除非明确需要叠加） - 若某组件需临时提升（如焦点态下拉），用
z-index: @z-dropdown + 10;，但必须加注释说明原因 - 构建时可通过 PostCSS 插件扫描
z-index:后非变量引用，自动报错（例如postcss-zindex-check）
为什么不能用函数动态生成 z-index？
Less 支持 .z-index(@level) { z-index: @level * 100; } 这类写法，但实际有害：
- 它掩盖了层级意图：
.z-index(3)不如@z-modal直观 - 无法做静态检查，
.z-index(99)会产出 9900，和@z-fullscreen冲突 - 修改基础倍数（如从 100 改成 50）会全局影响，风险不可控
- 更严重的是，它鼓励“按需分配”，反而破坏统一管理初衷
真正难的不是写变量，而是让所有人遵守同一份 _zindex.less —— 它得进代码规范，得进 CR checklist，得在 CI 里跑校验。否则再好的设计，也会在第 3 次迭代时被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
