SCSS不能动态管理z-index层级，因其仅生成静态值，无法响应运行时stacking context变化；正确做法是用SCSS定义语义化初始值并导出为CSS变量，由JS动态调整，同时确保position属性和锚点条件满足。
SCSS 本身不能构建“阴影层级”管理系统——z-index 和 box-shadow 是两个完全无关的 CSS 概念，混淆它们会导致视觉效果和层叠行为双双失控。真正要管的是 z-index 层级，而它根本不能靠 SCSS “排序”或“嵌套计算”来动态控制。
为什么 z-index 不能靠 SCSS Map 或函数“管理”
你写 $z-index: (modal: 1000, dropdown: 900)，再用 map-get($z-index, modal)，输出永远是 z-index: 1000。这个数字在编译时就冻结了，对以下情况毫无反应：
-
transform或opacity: 0.99在父容器上触发新 stacking context，子元素再大的z-index也出不去 -
createPortal把组件挂到body，但body没设position: relative，它的子元素和页面所有fixed元素裸拼数值 - 多个 Modal 依次打开，后开的必须高于前一个——静态列表里写死的
1000无法自增
正确做法：SCSS 只定义语义锚点，导出为 CSS 自定义属性
把 SCSS 当配置源，不是运行时控制器。只做三件事：
- 在
_z-index.scss中用map定义命名空间：$z-index: (modal: 1000, toast: 800, dropdown: 750); - 在
:root中批量导出：--z-modal: #{map-get($z-index, modal)};等 - 组件内直接使用：
z-index: var(--z-modal);，不调map-get()
JS 需要提层时，改写变量：el.style.setProperty('--z-dropdown', '1050'); —— 这样既保留集中维护，又把决策权交还给运行时。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的 DOM 和 CSS 锚点
z-index 生效的前提不是“数值够大”，而是三层锚点都守住：
- 目标元素必须有
position: relative（或absolute/fixed），static下设z-index完全无效 - 它的最近定位祖先不能意外创建 stacking context：检查是否带
transform、opacity < 1、filter或will-change - Portal 类组件挂载点（如
body）需显式设position: relative且z-index: 0，否则子元素的z-index是和整个页面其他定位元素裸拼大小
复杂点从来不在怎么排数字，而在于 stacking context 是嵌套的、隐式的、由多个 CSS 属性共同触发的——你没法靠一张 SCSS 列表穷举所有组合。
