Less中z-index混乱需同时管控变量定义、@import顺序及父容器层叠上下文：变量须集中于variables.less并带语义前缀（如@z-modal: 900），相邻层级差至少10；@import严格按variables→mixins→components顺序置于入口顶部；父容器若含opacity<1、transform或z-index:0等属性会静默创建新层叠上下文，使子元素z-index失效。
Less里z-index混乱，不是变量没定义，而是编译顺序+层叠上下文双重失控。 单靠@z-modal: 900不解决问题，必须同时管住变量来源、导入顺序、父容器是否静默创建新堆叠上下文。
变量必须集中定义且带语义前缀
散落在各个.less文件里的@z-xxx会因编译顺序不同而覆盖冲突。比如dropdown.less里写@z-dropdown: 500，modal.less里写@z-modal: 900，但若modal.less在dropdown.less之前被@import，最终CSS里.dropdown的z-index可能反而是900。
- 新建统一变量文件
variables.less，只放@z-toast: 300、@z-dropdown: 500、@z-modal: 900这类带UI角色的定义 - 禁止在组件文件（如
button.less）里重新声明@z-xxx，只允许用@z-modal等已有变量 - 相邻层级至少差10（如
@z-modal: 900，@z-modal__overlay: 890），留出调试插入空间
@import顺序决定CSS层叠优先级
Less编译时把所有@import提到顶部按书写顺序拼接，后导入的同权重规则会覆盖前面的——这直接影响z-index最终值。
- 入口
index.less头部严格按顺序@import："variables.less"→"mixins.less"→"components/button.less"→"pages/home.less" - 禁用文件名排序（如
_01-vars.less），Less根本不识别这种命名逻辑 - 用
@import (reference)引入仅含变量/mixin的文件，避免重复输出样式块干扰顺序
父容器悄悄创建层叠上下文，变量再准也白搭
即使.modal { z-index: @z-modal; }编译正确，只要它的某个祖先元素满足opacity < 1、transform != none或z-index: 0 + position: relative，整个.modal子树就被锁进局部上下文，@z-modal: 900只跟兄弟元素比，盖不住外部.sidebar（哪怕它只有z-index: 2）。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools中选中
.modal→ «Layout» 标签页看 «Stacking context» 是否为Yes；若是，逐级向上点父节点确认触发源 - 临时给可疑父容器加
opacity: 1 !important或transform: none !important，遮挡消失即坐实问题 - 修复不是删动画，而是给该父容器显式设
position: relative+ 合理z-index（如z-index: 100），让它成为可控锚点
z-index: 0 是最危险的“安全默认”
很多UI库（如Ant Design）默认给.ant-card加position: relative; z-index: 0，以为保险，实际是埋雷：它强制创建新层叠上下文，把所有子元素z-index关在里面。
- 检查第三方CSS是否含类似规则，若有，用
.ant-card { z-index: auto !important; }覆盖 - 自己写组件时，根元素需定位才设
z-index；若只需参与层叠不隔离，用z-index: auto比0更稳妥 - 绝对不要在
display: flex容器的子项上只写z-index: 999却不设position——Flex项虽支持z-index，但前提是父容器没被其他属性（如opacity）降级成独立上下文
真正难处理的从来不是@z-modal该写多少，而是那个看起来毫无威胁的opacity: 0.99卡片容器——它不声不响，就把整个子树的层级逻辑锁死了。
