z-index仅对定位元素生效，需设置position为relative/absolute/fixed/sticky；父容器创建堆叠上下文（如opacity<1、transform非none）会使子元素z-index仅在该上下文内比较；Canvas/SVG内部层级由绘制顺序或DOM顺序决定，z-index无效。
z-index 只对定位元素生效
直接给 <div> 设 z-index: 10 却没效果？大概率是因为它没触发定位上下文。HTML 默认文档流里，z-index 完全不生效。
必须先设置 position 属性为 relative、absolute、fixed 或 sticky，z-index 才会起作用。
-
position: static（默认值）→z-index被忽略 -
position: relative→ 最常用，不脱离文档流，适合局部层级微调 -
position: absolute→ 脱离文档流，需配合top/left等定位，常用于动画层叠加
动画元素堆叠受 stacking context 影响
你以为设了 z-index: 999 就一定在最上？不一定。一旦父容器创建了新的 stacking context，子元素的 z-index 就只在该上下文内比较，不再和外部元素直接比大小。
以下 CSS 属性会强制创建 stacking context（即使没写 z-index）：
立即学习“前端免费学习笔记（深入）”；
-
opacity小于 1（如opacity: 0.99） -
transform非none（如transform: translateX(10px)、scale(1)） -
filter非none -
will-change指定了影响层叠的属性
这意味着：一个 transform: rotate(0.01deg) 的动画容器，可能让里面 z-index: 9999 的按钮，永远压不住外面 z-index: 1 的未变换弹窗。
CSS 动画中 z-index 的动态更新要谨慎
用 JavaScript 动态改 z-index 控制“点击置顶”或“拖拽浮层”，容易失效，尤其搭配 transform 动画时。
常见陷阱：
- 在
transition或@keyframes中写z-index→ 大部分浏览器不支持过渡/动画z-index，会直接跳变 - 用
requestAnimationFrame频繁修改z-index→ 若父级已建 stacking context，修改无效 - 多个动画层共用同一父容器 → 层级由 DOM 顺序 +
z-index共同决定，DOM 后写的元素默认更靠前（即使z-index更小）
推荐做法：用 JS 切换 class 控制层级，而非直接操作 style：
.layer--active {
position: relative;
z-index: 1000;
}
.layer--inactive {
z-index: 1;
}
Canvas 和 SVG 动画的层级逻辑完全不同
如果动画是用 <canvas> 或 <svg> 实现的，z-index 基本没用——它们靠绘制顺序（paint order）决定层级：后绘制的内容覆盖先绘制的。
例如：
- Canvas 中，
ctx.fillRect()调用越晚，图层越靠前 - SVG 中，
<circle>写在<rect>后面，就盖在矩形上面 - 想动态调序？只能重绘（Canvas）或调整 DOM 子节点顺序（SVG）
混排 HTML + Canvas/SVG 时，用 z-index 控制 HTML 元素与 canvas/svg 标签本身的层叠关系；但 canvas 内部、SVG 内部的层级，得靠代码重排或分层 canvas。
