z-index不能直接写数字是因为缺乏语义化层级契约，应通过less变量绑定业务场景，如@z-modal-overlay: @z-base + 1000，并统一管理、预留间隙、对齐第三方库基准值。
z-index为什么不能直接写数字
直接在 Less 中写 z-index: 100; 看似简单，但项目一复杂就失控：组件复用时层级冲突、UI 调整要全局搜替换、不同模块的堆叠逻辑互相覆盖。根本问题不是 CSS 不支持变量，而是缺乏**语义化层级契约**——你得让 z-index: 999 明确代表“模态框遮罩层”，而不是靠注释猜。
用 Less 变量定义层级语义（非数值）
核心是把 z-index 值和业务场景绑定，而不是裸数字。推荐用层级命名空间 + 基数偏移：
@z-base: 0; @z-modal-overlay: @z-base + 1000; @z-modal-content: @z-base + 1010; @z-tooltip: @z-base + 200; @z-dropdown: @z-base + 300; @z-sticky-header: @z-base + 50;
这样做的好处：
- 修改
@z-base可整体上浮/下沉所有层级（比如接入新框架要求全局 +1000） - 相邻层级预留空隙（
+10而非+1），方便后续插入中间层 - 变量名自带上下文，
@z-modal-content比@z-1010更易维护
避免嵌套作用域污染 z-index 变量
Less 的变量作用域容易误用，常见错误：
- 在
.dropdown规则块里重定义@z-dropdown→ 其他文件无法复用 - 用
@z-xxx: 200;写在@import之后的局部文件 → 变量未声明就引用
正确做法：
- 所有 z-index 变量统一放在
variables/z-index.less中 - 主入口文件（如
index.less）最先@import 'variables/z-index.less'; - 组件样式中只读不写，例如：
.tooltip { z-index: @z-tooltip; }
处理第三方组件的 z-index 冲突
Ant Design、Element Plus 等库自带 z-index 变量，但它们通常硬编码或用 CSS 自定义属性。Less 项目里最稳妥的解法是「对齐而非覆盖」：
- 查文档确认第三方库的基准值（如 Ant Design
@zindex-modal默认 1000） - 把你的
@z-modal-overlay设为相同值，而非盲目加 1 - 若必须高于第三方组件，用
@z-modal-overlay: @z-antd-modal + 10;，而非写死1010 - 遇到用
style="z-index: 2000"的内联样式，只能靠 !important 强制覆盖（这是最后手段）
真正难的不是写变量，是让团队所有人遵守同一套层级语义。一旦有人在按钮里写 z-index: 9999，整个体系就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
