css变量能管z-index，但需配合定位属性并明确层叠上下文边界；否则即使变量定义正确也无效。常见失效原因包括元素position为static、变量作用域受限、父容器触发新层叠上下文等。
直接结论：CSS变量能管z-index，但必须配合定位属性 + 明确层叠上下文边界，否则变量再规范也白设。
为什么z-index: var(--z-modal)写了却没用？
最常见原因不是变量没定义，而是目标元素根本没进入“可被z-index控制”的状态：
- 元素
position还是static（默认值），z-index被浏览器完全忽略 - 变量声明位置不对，比如写在
.modal选择器里：.modal { --z-modal: 1000; z-index: var(--z-modal); }——变量只在该作用域内有效，其他组件无法复用 -
var(--z-modal)返回的是字符串，但z-index需要整数；不过现代浏览器会自动转换，这点倒不用手动parseInt
变量该在哪声明？:root不是唯一解
全局声明看似方便，实则埋雷。一个--z-modal被多个组件共用，某天弹窗升级到1200，侧边栏菜单就可能意外浮到最前。
- 推荐按功能域就近声明：
.tooltip { --z-element: var(--z-tooltip, 800); z-index: var(--z-element); } - 基础变量放
:root，但只作基数，不直接用于组件：:root { --z-base: 0; --z-layer-1: 10; --z-layer-2: 100; } - 组件内用计算微调：
.dropdown-menu { z-index: calc(var(--z-layer-2) + 1); }，避免硬编码
父容器悄悄创建了新层叠上下文，变量再准也没用
写了z-index: var(--z-modal)，但弹窗还是被带opacity: 0.99的卡片挡住——问题不在变量，而在卡片自己触发了新堆叠上下文，把整个子树锁死了。
- 触发新上下文的常见属性：
transform（哪怕只是translateZ(0)）、opacity 、<code>filter、will-change - 调试时看浏览器「Layers」面板，或临时移除父级这些属性验证
- 真需要模糊又想保层级？把
filter: blur(1px)移到子元素上，而不是父容器
数值设计要留空档，别迷信“越大越稳”
--z-modal: 999999短期能盖住一切，长期会让协作瘫痪：新人不敢动，后续组件只能往更高写，最后撞上2147483647（32位有符号整数上限）。
- 按功能分段，每段留至少10点空档：
--z-toast: 700、--z-dropdown: 900、--z-modal: 1000 - 遮罩层、内容层、箭头层在同个组件内用
+1、+2微调，不跨段乱跳 - 负值可用，但
z-index: -1会让元素沉到父容器背景之下——如果父容器有background-color，它就直接看不见了
真正难的不是写对变量，而是时刻意识到：z-index永远不是孤立数字，它活在定位属性和层叠上下文构成的嵌套关系里。变量只是让这个关系更可控，不是绕过它的捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
