z-index 失效主因是元素未定位或父级创建了 stacking context；需设 position 为 relative/absolute/fixed/sticky，避免 opacity/transform/filter 等触发新层叠上下文，动态堆叠宜用 JS 反向赋值 zIndex，偏移推荐 transform: translateY 而非 margin。
z-index 失效时先检查父容器的 stacking context
卡片堆叠不按预期分层，最常见的原因是 z-index 在非定位元素上无效，或被父级创建的 stacking context 截断。它只对 position 值为 relative、absolute、fixed 或 sticky 的元素起作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认每张卡片的
position不是static（默认值），至少设为position: relative - 检查卡片的任意上级容器是否设置了
opacity、transform、filter、will-change或isolation: isolate—— 这些都会隐式创建新的 stacking context，使子元素的z-index只在该上下文中生效 - 如果用
transform: translateZ(0)强制硬件加速，也会触发 stacking context，慎用
用 offset 模拟「堆叠偏移」别硬调 margin
想让上层卡片露出下层的一小条边缘（比如 4px），直接加 margin-top: -4px 看似简单，但会破坏文档流、影响点击区域和响应式行为；更稳的方式是用 transform: translateY(-4px)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
transform不影响布局流，不会挤压其他元素，且支持 CSS 动画过渡 - 若需兼容 IE10+，
translateY安全；避免用translateZ或rotateY等 3D 变换，它们在部分安卓 WebView 中表现不稳定 - 偏移量建议统一用变量管理：
--card-offset: 4px，方便后续调整层级密度
多卡片动态堆叠时 z-index 别写死
当卡片数量不确定（比如由 JS 渲染列表），写死 z-index: 10、z-index: 9 很快就会撞车。手动维护顺序不可持续，也容易漏掉插入/删除逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 动态设置：遍历卡片 DOM，按渲染顺序反向赋值
style.zIndex = cards.length - index，确保最后渲染的在最上层 - 纯 CSS 方案可用
:nth-child配合计数器（但仅适用于静态、数量可控的场景） - 避免用超大数值如
z-index: 9999，不同模块之间易冲突；合理范围如1–99更利于协作维护
移动端触摸穿透问题常被忽略
堆叠卡片中，上层卡片半透明或有空隙时，下层卡片可能意外响应 click 或 touchstart —— 尤其是用了 pointer-events: none 又没配好层级时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 上层卡片必须有明确的
pointer-events: auto（默认），不能依赖继承 - 若某层仅作视觉装饰（如阴影遮罩），明确设
pointer-events: none，并确保它不在交互卡片的 stacking context 内部 - 真机测试时重点点按堆叠边缘区域，Android Chrome 和 iOS Safari 对
z-index+pointer-events的组合处理略有差异
堆叠效果看着简单，但 stacking context 的嵌套、transform 的副作用、移动端事件捕获顺序，三者叠加就很容易出意料之外的层叠或点击行为。动手前先用浏览器 devtools 的 Layers 面板看一眼实际的绘制层结构，比猜省一半时间。
