z-index 必须用语义化变量统一管理，禁止魔法数字；按组件功能命名（如@z-modal）、预留数值间隙、避免跨模块复用同名变量，并注意层叠上下文对z-index的限制。
z-index 值必须用变量声明，不能直接写数字
Less 里写 z-index: 100 看似没问题，但一旦项目变大，不同模块的层级开始打架——弹窗盖不住下拉框、Toast 被 Header 挡住，根源往往是散落在各处的魔法数字。真正可控的做法是把所有层级收敛到一个变量文件里统一管理。
实操建议：
- 新建
variables.less，定义类似@z-nav: 100;、@z-dropdown: 200;、@z-modal: 900;这样的变量 - 所有组件只引用这些变量，比如
.dropdown { z-index: @z-dropdown; } - 避免用
@z-base + 1这类计算——编译后仍是静态值，但可读性和维护性暴跌 - 注意 Less 变量作用域：如果在嵌套规则里重定义
@z-modal，它只在当前作用域生效，容易误以为改了全局
层级变量要分层命名，别用「low / mid / high」这种模糊词
写 @z-low 看起来省事，但没人知道它到底该不该盖过 position: sticky 的表格头。真实项目里，层级必须绑定具体 UI 角色，否则协作时全靠猜。
实操建议：
- 按组件功能命名：
@z-toast、@z-tooltip、@z-drawer，而不是按“高低”抽象分类 - 预留间隙：相邻层级至少差 10（如
@z-tooltip: 300;，@z-modal: 900;），给未来插入中间层留余地 - 禁止跨模块复用同一变量名：Button 组件里的
@z-focus-ring和 Modal 里的@z-focus-ring必须是两个变量，哪怕值相同——语义不同，将来可能分家
用 z-index 前先确认父容器没触发新的层叠上下文
写了 z-index: @z-modal 却还是被盖住？大概率是父元素加了 transform、opacity: 0.99 或 will-change，悄悄创建了新层叠上下文，把你整个子树锁死在局部层级里。
实操建议：
- 用浏览器开发者工具的「Layers」面板（Chrome）或「3D View」（Firefox）直接看层叠上下文边界
- 检查父级是否意外带了
transform: translateZ(0)、filter: blur(0)等隐式触发属性 - 如果必须用
transform动画又需要提层，把z-index提到触发层叠上下文的那层去设，而不是只设在最内层元素上
导出为 CSS 自定义属性时，z-index 不能直接用 @value 替换
想用 JS 动态调 getComputedStyle 读取层级？别直接把 Less 变量转成 --z-modal: 900 就完事。CSS 自定义属性不参与层叠计算，它只是个字符串容器，你得手动在 CSS 里再赋值一次。
实操建议：
- Less 中仍用变量控制逻辑，但最终输出必须显式写进规则：
.modal { z-index: var(--z-modal); } - 不要依赖
:root { --z-modal: @z-modal; }然后指望别处自动生效——CSS 里没地方会自动读这个变量并应用到z-index - 如果要用 JS 控制，优先改 class 名（如
.modal.is-top），而不是 runtime 改style.zIndex，后者容易和 Less 编译结果冲突
层级不是数字越大越安全，而是上下文、命名、导出方式三者咬合严实才不会漏。漏掉任意一环，z-index 就从控制手段变成玄学开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
