z-index仅对定位元素生效，需设置position为relative/absolute/fixed/sticky；父容器创建堆叠上下文（如opacity
z-index 只对定位元素生效
直接给 必须先设置 你以为设了 以下 CSS 属性会强制创建 stacking context（即使没写 立即学习“前端免费学习笔记（深入）”； 这意味着：一个 用 JavaScript 动态改 常见陷阱： 推荐做法：用 JS 切换 class 控制层级，而非直接操作 style： 如果动画是用 例如： 混排 HTML + Canvas/SVG 时，用 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 就只在该上下文内比较，不再和外部元素直接比大小。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 的动态更新要谨慎
z-index 控制“点击置顶”或“拖拽浮层”，容易失效，尤其搭配 transform 动画时。
transition 或 @keyframes 中写 z-index → 大部分浏览器不支持过渡/动画 z-index，会直接跳变requestAnimationFrame 频繁修改 z-index → 若父级已建 stacking context，修改无效z-index 共同决定，DOM 后写的元素默认更靠前（即使 z-index 更小）.layer--active {
position: relative;
z-index: 1000;
}
.layer--inactive {
z-index: 1;
}
Canvas 和 SVG 动画的层级逻辑完全不同
或 实现的，z-index 基本没用——它们靠绘制顺序（paint order）决定层级：后绘制的内容覆盖先绘制的。
ctx.fillRect() 调用越晚，图层越靠前z-index 控制 HTML 元素与 canvas/svg 标签本身的层叠关系；但 canvas 内部、SVG 内部的层级，得靠代码重排或分层 canvas。
