使用position: absolute叠卡片时，80%失败因父容器未设position: relative或z-index失效；需确保所有卡片同层叠上下文、同级dom、用transform位移、class切换opacity并监听transitionend。
直接用 position: absolute 叠卡片 + opacity + transition 就能跑通，但 80% 的失败都卡在父容器没设 position: relative 或 z-index 失效上。
为什么卡片堆一起却不动？检查父容器定位上下文
所有参与层叠的卡片必须放在同一个层叠上下文中，否则 z-index 彼此不比较。最稳妥的做法是：外层容器显式设 position: relative，且不带任何会触发新层叠上下文的样式（比如 opacity: 0.99、transform、filter）。
- 错误写法：
<div class="stack"><div class="card">...</div></div>，但.stack只写了width和height，没设position - 正确写法：
.stack { position: relative; width: 300px; height: 200px; } - 卡片本身必须是同级元素，不能嵌套在不同深度的 div 里——否则祖先元素一旦有
transform，就会隔离z-index计算范围
淡入淡出动画总是一闪而过？别直接改 style.opacity
JS 直接连续赋值 el.style.opacity = '0'; el.style.opacity = '1'; 会被浏览器合并渲染，跳过过渡帧。真正生效的方式是靠 class 切换或强制重排。
- 推荐写法：
el.classList.remove('show'); el.offsetHeight; el.classList.add('show');——offsetHeight触发同步重排，确保浏览器“看到”初始状态 - CSS 必须写全：
.card { opacity: 0; transition: opacity 0.3s ease; }和.card.show { opacity: 1; }，缺一不可 - 禁用
transition: all——它会让 border、color 等非预期属性也参与过渡，导致动画抖动或延迟启动
z-index 设了却没用？排查层叠上下文泄漏
三张卡片按顺序设了 z-index: 1、2、3，但第三张还是被盖住？大概率是某张卡片的父元素（甚至 body 上某个组件）意外创建了新层叠上下文。
- 典型诱因：
opacity小于 1、transform非空值、will-change: transform、filter、perspective - 排查方法：用开发者工具选中卡片，看 computed 样式里是否出现
stacking context字样，或检查transform/opacity是否被继承 - 修复原则：把所有卡片保持 DOM 同级；若必须嵌套，确保中间容器不带上述属性；必要时加
isolation: isolate隔离，但慎用——它本身也创建层叠上下文
要“错位堆叠”效果？用 transform 比 top/left 更安全
纯靠 z-index 只控制遮挡，视觉上仍是平铺。想做出真实卡片堆叠感（上一张露出一角），位移必须用 transform，而不是 top/left。
-
transform: translateY(-6px) translateX(6px)不影响文档流，不会触发重排，且兼容性好 - 注意：
transform本身会创建新层叠上下文，所以所有卡片的z-index应该设在 transform 之前，且数值递增方向与视觉层级一致（比如最上层卡片z-index: 3，同时transform最大） - 移动端安卓 WebView 中，
transform可能导致文字模糊，加一句backface-visibility: hidden能缓解
真正容易被忽略的是：淡出后如果要彻底移除元素占位，visibility: hidden 必须等 transitionend 事件触发后再设，不能和 opacity: 0 写在同一句里——否则动画直接中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
