应统一用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) 只能屏蔽，不能补救。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

真实可用的降级路径：

• 用 :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 的耦合问题——这两个点一旦出错，整个展开逻辑会在某台设备上彻底静默，且无控制台报错。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！