浮动卡片Hover时Z轴层级错乱需确保其最近有定位的祖先（如.cards-list）设position: relative，.card自身设position: relative并hover时用z-index: 10；避免子元素乱设z-index以防创建新层叠上下文；悬停效果统一定义在.card:hover下，用BEM修饰符管理状态；阴影与位移优先用transform和filter: drop-shadow()优化渲染；触摸设备需用@media (hover: hover) and (pointer: fine)包裹hover样式，并提供.click展开fallback。
浮动卡片Hover时Z轴层级错乱怎么办
直接给 .card 加 z-index 通常没用——因为父容器没定位，z-index 不生效。BEM结构下，浮动卡片的层级必须由其**最近的、有定位的祖先元素**控制。
- 确保
.card的直接父容器（比如.cards-list）设置了position: relative -
.card自身设position: relative，hover 时用z-index: 10（数值要高于同级其他卡片） - 避免在
.card__content或子元素上乱加z-index，否则会创建新层叠上下文，反而遮挡自身阴影或悬停动画
用BEM命名保证hover状态可维护
BEM不鼓励写 .card:hover .card__title 这类嵌套选择器，既难复用又易被覆盖。正确做法是把 hover 状态“提升”为修饰符。
- 写成
.card--hovered .card__title，通过 JS 切换 class，或纯 CSS 用:hover触发但只作用于根元素：.card:hover - 所有悬停效果（阴影、位移、缩放）都定义在
.card:hover下，不分散到子元素的 hover 中 - 如果卡片内有按钮需独立 hover 效果，用
.card__button--hovered，和卡片状态解耦
阴影与位移组合导致渲染抖动
CSS box-shadow 和 transform: translateY(-4px) 同时触发时，部分浏览器（尤其旧版 Safari）可能重绘整块区域，造成轻微卡顿。
- 优先用
transform代替top/margin-top实现上浮，它走 GPU 加速 - 阴影用
filter: drop-shadow()替代box-shadow可改善边缘锯齿，但注意它不支持内阴影且会作用于子元素透明区域 - 给
.card加will-change: transform（仅在 hover 时加）能提前提示渲染引擎，但别滥用，否则增加内存开销
响应式下hover失效的兼容处理
触摸设备没有 hover 概念，纯 CSS :hover 在 iPad 或 Android Chrome 上可能只在点击后短暂触发，或完全不触发。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 hover 做关键交互（比如展开核心内容），hover 只用于增强体验
- 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，确保只在真正支持精细指针的设备上生效 - 移动端 fallback 方案：保留点击展开逻辑，用 JS 监听
touchstart并添加.card--active类，样式复用 hover 规则
