SCSS无法动态管理z-index，因其仅生成静态值；正确做法是用Sass变量定义语义化层级锚点（如$z-modal-overlay: 1000），严格分区、留间隙、禁用魔法数字，并确保position属性与stacking context条件满足。
不能靠 SCSS “动态管理” z-index，它只是编译期静态值；真正优雅的做法是用 Sass 变量定义语义化层级锚点，并严格留间隙、分区、禁用魔法数字。
为什么 $z-modal: 1000 不等于“可管理”
SCSS 编译后所有 $z-modal 都变成固定数字，对以下情况完全无感：
- 父容器加了
opacity: 0.99，意外创建 stacking context，子元素再大的z-index也出不去 -
createPortal挂到body，但body没设position: relative，弹窗和页面其他fixed元素裸拼数值 - 连续打开多个 Modal，后开的必须高于前一个——静态变量无法自增
怎么写真正可维护的 _z-index.scss
核心是让变量名自带意图、值之间有余量、作用域清晰：
- 按职责分区：
$z-background: -10（压底图）、$z-tooltip: 700、$z-dropdown: 900、$z-modal-overlay: 1000、$z-modal-content: 1010 - 值必须整数且留足间隙：900 → 1000 中空出 99，方便后续插进
$z-combo-box: 950 - 禁用
$z-max或$z-9999类别名——语义缺失，且易与 Headless UI、Bootstrap 默认值冲突 - 导入必须显式命名空间：
@use "z-index" as z，调用写成z-index: z.$z-modal-overlay
为什么不能混用 Sass 变量和 CSS 自定义属性
常见错误是既写 z-index: $z-modal，又导出 --z-modal: #{$z-modal}，导致两套系统脱节：
立即学习“前端免费学习笔记（深入）”；
- Sass 变量编译后消失，JS 读不到；CSS 变量运行时可改，但 Sass 里没法做类型校验
- 拼错
$z-moda，Sass 构建直接报错；拼错var(--z-moda)，要等运行时才发现 - 检查编译后 CSS：如果输出的是
z-index: $z-modal（未替换），说明@use路径错或没生效 - VS Code 装 Sass IntelliSense 插件，悬停能跳转定义位置，快速定位未引入问题
z-index 生效的前提从来不是“数字够大”
真正卡住的永远是 stacking context 的隐式嵌套：
- 目标元素必须有
position: relative（或absolute/fixed），static下设z-index完全无效 - 它的最近定位祖先不能意外触发新 context：查
transform、opacity < 1、filter、will-change - Portal 类组件挂载点（如
body）需显式设position: relative且z-index: 0，否则子元素的z-index是和整个页面裸拼 - 移动端
position: fixed元素默认创建 stacking context，遮罩层和弹窗必须同级、共用一个fixed父容器
复杂点不在怎么排数字，而在于 stacking context 是嵌套的、隐式的、由多个 CSS 属性共同触发的——你没法靠一张 SCSS 列表穷举所有组合。
