应统一用transform: translateY(-5%)替代top/left/margin，因其基于自身尺寸的百分比单位适配性强且不触发重排；需设父容器height/min-height确保%计算有效，并注意z-index失效常源于父容器意外创建层叠上下文。
卡片展开时位置偏移不一致？用 transform 而非 top/left/margin
常见错误是写 hover:top-2 或 margin-top: -8px，结果在 Flex/Grid 布局中挤压邻近元素，或在响应式场景下位移量失真。根本原因是这些属性会触发重排（reflow），且像素值无法随容器缩放自适应。
正确做法统一用 transform: translateY(-5%)：
- 百分比单位基于元素自身尺寸计算，适配不同卡片高度
- 必须给父容器设
height或min-height，否则 % 计算为 0 - 搭配
transform-origin: bottom center控制扇形旋转支点 - 避免同时写
transform: scale(1.02) translateY(-5%)，应合并为单条声明防解析歧义
展开后卡片被遮挡？z-index + 层叠上下文陷阱
最常被忽略的点：父容器加了 opacity: 0.99、filter: blur(1px) 或 will-change: transform，会创建新层叠上下文，导致子元素的 z-index 失效——无论你设多高都压不住兄弟元素。
排查和修复要点：
立即学习“前端免费学习笔记（深入）”；
- 展开最前的卡片应设最高
z-index（如z-index: 10），后续依次递减（9、8…） - 检查父容器是否意外触发层叠上下文：用浏览器 DevTools 的 “Layers” 面板确认
- 禁用所有可能创建新层叠上下文的 CSS 属性，除非明确需要
- 若必须用
backdrop-filter，需单独包裹卡片并隔离transform渲染层
移动端悬停无效？别依赖 :hover
iOS 和 Android 触摸设备没有 hover 状态，纯 :hover 在 Safari/Chrome 移动版上基本不触发。硬塞 @media (hover: hover) 只能屏蔽，不能补救。
真实可用的降级路径：
- 用
:focus-within搭配tabindex="0"，让卡片可聚焦（键盘与部分触摸屏支持） - 对关键卡片加 JS 监听
touchstart，动态添加is-hovered类 - 放弃“展开”动效，改用更轻量的
scale(1.015)+box-shadow微调，它在触摸反馈中依然成立 - 避免在
@media (hover: none)中写复杂动画，只保留基础状态切换
延迟展开顺序错乱？transition-delay 不要手写
写死 transition-delay: 0.1s、0.2s 看似简单，但卡片增减时要同步改 N 处，极易漏掉或错位。SCSS 或 CSS 自定义属性才是可持续方案。
推荐两种实操方式：
- 用 CSS
nth-child+calc()：例如.card:nth-child(1) { transition-delay: calc(var(--base-delay, 0.1s) * 0); } - SCSS 循环生成（更可控）：
@for $i from 1 through 6 { .card:nth-child(#{$i}) { transition-delay: #{$i * 0.08}s; } } - 注意：延迟值不宜超过 0.4s，否则用户感知为“卡顿”而非“有序”
- 所有卡片必须共用同一
transition-property（如transform 0.4s ease-out），否则 delay 不生效
真正难调试的不是动效本身，而是层叠上下文和移动端 fallback 的耦合问题——这两个点一旦出错，整个展开逻辑会在某台设备上彻底静默，且无控制台报错。
