SCSS不能动态管理z-index，仅支持编译期静态赋值；正确做法是用语义化变量定义层级锚点、留间隙防冲突，并与运行时stacking context意识对齐，同时确保position属性和祖先上下文条件满足。
SCSS 本身不能“动态管理”z-index，它只做编译期静态赋值；所谓“安全处理”，核心是用变量建立语义锚点、留间隙、防冲突，并与运行时 stacking context 意识对齐——否则再整齐的 SCSS 变量也压不住一个 opacity: 0.99 父容器。
为什么直接写 z-index: 9999 是高危操作
这不是风格问题，而是线上事故温床：
-
z-index: 9999没语义：没人能靠数字判断这是 toast 遮罩还是 modal 内容层，IDE 无法跳转、拼错不报错 - 数值易撞车：A 组件写
$z-toast: 990，B 组件写z-index: 990（未引用变量），编译后冲突但无提示 - 无法应对 stacking context 分裂：就算你写了
z-index: 2000，父级加了transform，子元素就永远困在那个 context 里，再大也没用
怎么定义真正可维护的 SCSS $z- 变量
关键不是“从几开始”，而是结构清晰、留余量、可校验：
- 按职责分区，值严格递增且留间隙：
$z-background: -10、$z-default: 1、$z-tooltip: 700、$z-dropdown: 900、$z-modal-overlay: 1000、$z-modal-content: 1010—— 中间空出 99，方便插$z-combo-box: 950 - 禁用魔法数字：
$z-max或$z-9999违背语义，且和 Bootstrap 的$zindex-modal: 1055冲突 - 必须显式
@use引入，调用带命名空间：z-index: z.$z-modal-overlay；若漏掉@use，编译输出会是原样z-index: $z-modal-overlay，一眼可查
如何让 SCSS 变量和 JS 运行时层级同步
Sass 变量编译后就消失了，JS 读不到；但 Modal hover 提层、多层弹窗栈等场景必须动态调整——不能靠重写 CSS 文件：
立即学习“前端免费学习笔记（深入）”；
- 在
:root或组件局部作用域导出 CSS 自定义属性：--z-modal-overlay: #{$z-modal-overlay} - JS 中用
el.style.setProperty('--z-modal-overlay', '1060')动态提层，确保视觉层级与逻辑一致 - 禁止混用：
z-index: $z-modal-overlay和z-index: var(--z-modal-overlay)同时存在，会导致维护断层和调试混乱 - 检查编译后 CSS 是否真输出了数值（而非变量名），这是验证
@use路径是否正确的最快方式
最容易被忽略的 DOM 和 CSS 锚点条件
再完美的 SCSS 变量表，也会在三个基础条件缺失时彻底失效：
- 目标元素必须有
position: relative（或absolute/fixed/sticky）；static下设z-index完全无效 - 它的最近定位祖先不能意外创建 stacking context：检查是否带
transform、opacity < 1、filter或will-change - Portal 类组件（如 Modal）挂载点（如
body）需显式设position: relative且z-index: 0，否则子元素的z-index是和整个页面裸拼大小
复杂点从来不在怎么排数字，而在于 stacking context 是嵌套的、隐式的、由多个 CSS 属性共同触发的——你没法靠一张 SCSS 列表穷举所有组合。
