根本原因是position: absolute弹出层参照最近定位祖先而非卡片本身；需给卡片容器加position: relative，用top: 100%控制方向，避免transform干扰；opacity过渡需显式声明初始值并写全transition属性；移动端应避免依赖hover，改用click或@media检测；z-index失效多因父元素创建新层叠上下文，建议提至body下或优化层级结构。
hover时详情不跟随卡片移动或错位
根本原因是position: absolute的弹出层脱离文档流后，参照的是最近的定位祖先（position: relative/absolute/fixed），而不是卡片本身。如果卡片容器没设position: relative，弹出层就会相对于
实操建议：
- 给卡片最外层容器加
position: relative，确保absolute子元素以它为基准 - 弹出层用
top: 100%或bottom: 100%控制方向，别写死top: 20px这类绝对值 - 若卡片有
transform（比如缩放动画），需额外加transform-style: preserve-3d或改用top/left微调，否则absolute会受transform影响偏移
opacity过渡闪一下或不生效
opacity本身支持CSS过渡，但常因两个原因失效：一是初始状态没显式声明opacity: 0，二是过渡属性没写全或写在错误选择器上。
常见错误现象：hover瞬间弹出、没有淡入效果、甚至第一次hover不触发。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 弹出层默认必须带
opacity: 0和pointer-events: none（否则透明但还能点） - 过渡写在弹出层自身上：
transition: opacity 0.2s ease-in-out，别只写在:hover里 - 避免和
visibility: hidden混用——visibility不可过渡，且会阻断opacity动画
移动端hover不触发或误触
手机端没有真正意义上的hover，浏览器通常用“首次点击模拟hover”，导致弹出层一闪而过或需要点两下才稳定显示。
使用场景：卡片列表在iPad或安卓Chrome里测试时表现异常。
实操建议：
- 用
@media (hover: hover)做特性检测，只对支持hover的设备启用:hover逻辑 - 移动端改用
click或tap事件控制is-open类，配合JS切换opacity - 若坚持纯CSS，可加
touch-action: manipulation减少延迟，但无法彻底解决hover不可靠问题
z-index层级被遮挡或失效
弹出层看不见？大概率是z-index没起作用。不是数值不够大，而是父容器形成了新的层叠上下文，把子元素锁死在内部。
性能影响：滥用z-index: 9999会让浏览器重排更吃力，尤其在滚动区域里。
实操建议：
- 检查弹出层父容器是否设置了
opacity 、<code>transform、filter等——这些都会创建新层叠上下文 - 把弹出层提到和卡片同级的DOM位置（如挂到
下），用JS动态计算位置，避开父层叠限制 - 只对必要元素设
z-index，优先用文档流顺序控制层级，比硬调数字更稳
细节容易被忽略：opacity过渡和position: absolute看着简单，但一旦涉及transform、多层嵌套、响应式折叠，定位参照系和渲染层就很容易悄悄变掉。动手前先用DevTools的“Layers”面板看一眼实际渲染层级，比猜快得多。
