卡片悬停上浮失效主因是transition未写在默认状态或误用all，应写在基础样式中并优先用transform: translatey(-4px)；需同步检查z-index、层叠上下文及父容器overflow。
卡片悬停时没上浮，transition 不生效？
常见原因是 transition 没写在默认状态（非 hover），或者过渡属性写成了 all 却漏了触发值变化。CSS 动画只对「可动画属性」起效，transform 可以，但 margin 或 top 配合 position: relative 也能动，只是性能差、易抖动。
实操建议：
-
transition必须写在基础样式里，比如.card { transition: transform 0.3s ease; }，不能只写在.card:hover中 - 优先用
transform: translateY(-4px)，别用margin-top: -4px—— 后者会触发重排，卡顿明显 - 如果卡片有阴影，顺手加
box-shadow: 0 4px 12px rgba(0,0,0,0.1)，hover 时把阴影加深+扩大，视觉更自然
为什么用了 transform 还是感觉“飘”或错位？
本质是层叠上下文（stacking context）被意外创建。比如父容器有 opacity: 0.99、will-change: transform 或 filter，都可能让子元素的 transform 表现异常，尤其在 Safari 上容易偏移。
实操建议：
- 检查父级是否无意中触发了新层叠上下文，临时加
outline: 1px solid red看布局边界 - 确保卡片自身没有
transform-origin被改过，默认是50% 50%，乱设会导致上浮中心偏移 - 如果卡片内含图片或文字，避免在 hover 时同时改
font-size或line-height—— 这些会触发布局重算，抵消transform的硬件加速优势
需要兼容 IE11？transform 和 transition 怎么写才稳？
IE11 支持 transform 和 transition，但不支持 transform: translateY() 的简写语法（如 translateY(-4px) 必须写全 transform: translate(0, -4px)），且不认 ease-out 以外的部分缓动函数。
实操建议：
- 写两行：先写标准语法
transform: translateY(-4px);，再紧跟着写兼容行transform: translate(0, -4px);（IE11 会覆盖前一行） -
transition用transition: transform 0.3s ease-out;，别用cubic-bezier，IE11 解析失败就退成瞬间切换 - 真要保 IE11，放弃阴影动画——
box-shadow在 IE 中无法过渡，写了也白写
多个卡片堆叠时，hover 上浮后被上面的卡片盖住？
这是 z-index 生效时机问题。transform 本身不改变文档流，但会创建新层叠上下文；如果相邻卡片没有明确 z-index，浏览器按源码顺序渲染，后写的卡片天然压在前面的上面，hover 后反而被盖。
实操建议：
- 给卡片统一加
position: relative和z-index: 1，hover 时升到z-index: 10 - 别依赖 HTML 顺序控制层级，尤其用 JS 动态插入卡片时，顺序不可控
- 如果用了 CSS Grid 或 Flex 布局，确认没在父容器上设
overflow: hidden—— 它会裁掉超出部分，让上浮效果直接消失
最常被忽略的是：上浮不是独立动作，它和阴影、z-index、父容器层叠上下文是一套连锁反应。调一个参数，往往得同步看另外三个地方有没有冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
