z-index 无法靠 Sass 循环自动管理，因其是运行时生效的层叠顺序，而 Sass 编译期仅输出静态值；DOM 顺序、定位上下文及 transform 等触发的新层叠上下文均会覆盖它。
z-index 不能靠 Sass 循环“自动管理”
直接说结论：z-index 是运行时生效的层叠顺序，Sass 编译期生成的数值无法解决真实 DOM 层级冲突。你写 @for $i from 1 through 10 { .layer-#{$i} { z-index: $i; } }，只是批量输出静态值，不等于页面上元素就按预期堆叠——DOM 顺序、定位上下文、transform 触发的新层叠上下文，全会覆盖它。
哪些场景下 z-index 会“失效”
不是值没起作用，而是你没在正确的层叠上下文中设置它：
-
z-index只对position为relative、absolute、fixed或sticky的元素生效；static元素设了也白设 - 父容器有
transform、opacity 、will-change等属性时，会创建新的层叠上下文，子元素的z-index只在该上下文内比较，不再和外部元素比 - 兄弟元素之间，DOM 出现顺序（source order）是默认层叠依据，
z-index仅在同级定位元素间生效
Sass 循环定义 z-index 的合理用法
它只适合做「命名约定 + 值预设」，而非“智能排序”。关键在控制变量范围和语义分组：
- 用 map 而非简单循环，比如
$z-layers: (background: -1, base: 0, overlay: 100, modal: 200, toast: 300);，避免魔数 - 导出为 CSS 自定义属性：
:root { --z-overlay: #{map-get($z-layers, overlay)}; }，方便 JS 动态读取 - 禁止跨组件复用同一组
$z-layers，不同业务模块应隔离定义，否则.modal在 A 页是 200，在 B 页被覆盖成 50 就乱套 - 别给每个原子组件都配
z-index，按钮、卡片这类默认不参与层叠的元素，留空比硬塞z-index: 1更安全
真正要检查阴影层级，得看浏览器开发者工具的 Layers 面板
Chrome DevTools 的 Layers 面板（需在 Rendering 设置中开启）能直观显示当前页面所有层叠上下文和渲染层。比盯着 Sass 变量更可靠：
- 选中元素后，右键 →
Reveal in Layers panel，看它属于哪个 stacking context - 注意标红的 “
Composited layer”，说明触发了硬件加速，但同时也可能意外隔离了z-index作用域 - 阴影（
box-shadow）本身不产生新层叠上下文，但若父元素因filter或transform创建了新上下文，阴影就会被“锁”在里面
复杂交互中，z-index 冲突往往不是数值不够大，而是你根本没意识到自己已经掉进另一个层叠上下文里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
