z-index 可用 css 变量但仅限静态数值，因不支持表达式或单位；需配合 position 才生效，且变量不创建层叠上下文；推荐分层定义基础值并避免嵌套 calc。
z-index 为什么不能直接用 CSS 变量？
因为 z-index 只接受数字、auto、inherit 等关键字，不支持 CSS 变量计算——即使你写了 --z-modal: 1000，再写 z-index: var(--z-modal)，浏览器也认，但一旦变量值是表达式（比如 calc(var(--z-base) + 10)）或带单位，就失效。更隐蔽的问题是：CSS 变量本身不参与层叠上下文生成，它只是个“值容器”，真正决定层级的是元素是否建立了新的层叠上下文（比如有 position 且非 static，同时有 z-index 值）。
如何安全地用 CSS 变量管理 z-index 层级
核心做法是：只用变量存基础数值，所有 z-index 赋值都走 var()，且确保使用处的元素已处于可被层叠控制的状态。
- 必须给元素设置
position: relative、absolute或fixed，否则z-index无效 - 避免在父元素上设高
z-index后，子元素靠继承“蹭”层级——子元素自己的z-index才起作用 - 推荐分层定义变量，例如：
:root { --z-base: 0; --z-tooltip: calc(var(--z-base) + 10); --z-dropdown: calc(var(--z-base) + 20); --z-modal: calc(var(--z-base) + 100); } - 组件内直接使用：
z-index: var(--z-modal)，不要嵌套多层calc，部分旧版 Safari 对嵌套calc+var()支持不稳定
阴影（box-shadow）和 z-index 是两回事，别混
用户常误以为“阴影深 = 层级高”，其实 box-shadow 只是视觉效果，不影响层叠顺序。一个 z-index: 1 的按钮加再厚的阴影，也会被 z-index: 2 的透明遮罩盖住。
- 阴影用
box-shadow: 0 2px 8px rgba(0,0,0,0.15)控制，和z-index完全无关 - 想让弹窗“看起来浮在上面”，要同时满足：①
z-index足够高；② 有恰当的阴影增强立体感；③ 背景遮罩（backdrop-filter或半透黑层）明确区分层级 - 移动端要注意：iOS Safari 在
transform: translateZ(0)或will-change: transform下可能意外创建层叠上下文，导致预期外的遮挡
容易被忽略的兼容性断点
CSS 变量本身在 IE 中完全不支持，但即使现代浏览器，也有几个真实存在的坑：
- Vue / React 组件中动态更新
:root变量时，某些版本 Chrome 会延迟重绘z-index，建议配合force reflow（如读取offsetHeight）或改用 CSS-in-JS 方案 - 使用
@layer管理样式优先级时，z-index不受@layer影响，它只看声明顺序和 specificity - 如果用 PostCSS 插件（如
postcss-custom-properties）做降级，注意它无法处理calc(var(--x) + 1)这类动态计算，只能展开静态变量
overflow: hidden 截断，或者它的祖先元素意外触发了层叠上下文——这时候调再高的 z-index 也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
