z-index 不支持 calc() 计算，因其只接受 类型，而 calc() 返回
z-index 本身不支持 CSS 变量的动态计算（比如 calc(--base-z + 1)），浏览器会直接忽略这种写法并回退到 auto 或初始值。
为什么 calc() 不能用在 z-index 上？
z-index 接受的值类型是 <integer></integer>，而 calc() 在 CSS 中返回的是 <number></number> —— 即使结果是整数，类型也不匹配。CSS 规范明确要求 z-index 必须是整数字面量或 auto，calc() 不被允许。
哪些写法会静默失效？
以下写法看似合理，但实际无效：
-
z-index: calc(var(--z-base) + 10);→ 浏览器丢弃该声明，等同于没写 -
z-index: var(--z-modal);→ 如果--z-modal是字符串（如"1000"）或未定义，也会失效 -
z-index: var(--z-modal, 0);→ fallback 仅在变量未定义时生效；若变量值非法（如"1000px"），仍无效
真正可用的变量方案
必须确保变量值是**纯整数字符串**，且在使用前已定义为合法整数：
- 定义时用无单位整数：
:root { --z-overlay: 1000; --z-tooltip: 900; } - 使用时直接引用：
z-index: var(--z-overlay);（✅ 有效） - 避免运行时拼接：
--z-dynamic: 100;+z-index: var(--z-dynamic);是唯一安全方式，不能加减 - 层级批量管理可配合预设范围：
--z-nav: 100; --z-dropdown: 150; --z-modal: 200;，靠人工维护顺序
复杂场景下的替代思路
当需要“动态生成层级”（如多个弹窗按打开顺序叠高），CSS 变量无法胜任，得交由 JS 控制：
- 给每个实例元素设内联
style="z-index: 1001"，JS 每次递增计数器 - 用自定义属性存序号：
data-z-order="3"，再用 CSS attribute selector 匹配（但无法做数学运算） - 放弃纯 CSS 方案：用 JS 设置
element.style.zIndex = baseZ + index，更可靠
calc() 能参与 z-index 运算——它根本不在规范支持列表里。变量能用，但只是“替换”，不是“计算”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
