css自定义属性本身不触发层叠上下文；z-index异常源于使用变量的元素未定位或被父级层叠上下文隔离，需检查position、祖先stacking context及变量是否被正确解析。
自定义属性（CSS Custom Properties）本身不触发层叠上下文，也不会被层叠上下文“隔离”或“截断”——但如果你发现 --z-modal 等变量赋值后 z-index 行为异常，问题一定出在它所作用的元素上，而非变量本身。
为什么改了 --z-modal 却没生效
根本不是变量没传下去，而是使用该变量的元素仍处于错误的层叠上下文中。例如：
-
.modal { z-index: var(--z-modal); }生效的前提是.modal本身已定位（position: fixed或relative），否则z-index直接被浏览器忽略 - 若
.modal的某个父容器有opacity: 0.99或transform: scale(1)，则整个模态框被锁死在该上下文内，var(--z-modal)再大也出不去 - 变量值本身可能被覆盖：比如媒体查询中重写了
:root { --z-modal: 50; }，而你期望的是120
用 DevTools 快速验证变量是否真正起作用
别只看 Styles 面板里有没有 var(--z-modal)，要确认它是否被计算成真实数值：
- 选中目标元素 → «Computed» 面板搜索
z-index，看右侧显示的是具体数字（如120）还是var(--z-modal)（说明未解析） - 若显示
var(--z-modal)，说明变量未定义或作用域不对：检查是否写在:root，或是否被更具体的 selector 覆盖（如.theme-dark :root未继承） - 若显示数字但层级仍错乱，立刻切到 «Layers» 面板，点开该元素任意父节点，看 stacking context 是否为
yes—— 找到第一个标为yes的祖先，就是“结界”源头
isolation: isolate 和自定义属性一起用时的典型陷阱
加了 isolation: isolate 并不会让变量“自动提升层级”，它只创建新上下文，不改变容器自身在外部的堆叠位置：
- 必须同时给容器设
position: relative+z-index: var(--z-overlay)，否则它默认落在第 0 层，内部再高的z-index也无效 - 如果父级已有
transform，isolation: isolate会被降级处理（尤其 Safari），此时变量虽生效，但容器仍被包在旧上下文中 - Tailwind 用户注意：
theme.zIndex必须完整定义为对象，键名加引号、值为字符串（如"100"），且修改后需重启开发服务，否则z-50类根本不会生成对应 CSS
变量本身很干净，错乱永远发生在“谁用了它”和“它用在哪一层”。最常被跳过的动作是：没确认目标元素的 position 值，也没查它的直接父级是否悄悄建了上下文——这两步比调变量值重要十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
