根本原因在于.grid-item未设position: relative导致z-index不生效，且.grid-container若含transform、opacity
为什么卡片悬停放大后被遮住或裁切
根本不是 z-index 数值不够大，而是 .grid-item 没设 position: relative，导致 z-index 完全不生效。Grid 项默认是 position: static，此时写 z-index: 999 和没写一样。
更隐蔽的问题是：如果 .grid-container 上加了 transform、opacity: 0.99 或 filter: blur(0)，它会悄悄创建一个新层叠上下文，把所有子项的 z-index 锁死在内部——哪怕你 :hover 时设了 z-index: 9999，也盖不过同级的其他容器。
- 必须给每个卡片加
position: relative -
:hover时显式提升z-index（比如z-index: 100） - 检查父容器是否无意中触发了隐式层叠上下文
transform: scale() 放大后边缘错位或溢出
transform 不改变文档流，Grid 仍按原始尺寸分配空间，放大后内容自然“撑出来”。常见表现是边缘被父容器 overflow: hidden 截断，或遮挡邻项。
- 父容器别设
overflow: hidden，除非你真想裁剪；可改用overflow: visible - 给卡片自身加
overflow: hidden更可控——只裁自己，不干扰布局 - 必须设
transform-origin: center，否则缩放中心偏移；若卡片被align-items: stretch拉满，还要加align-self: center - 放大倍数建议控制在
1.05–1.15，超过1.15容易触发明显遮挡或边缘错位
transition 写在哪？哪些属性能动
transition 必须写在常态（非 :hover）的卡片上，且只对支持插值的属性有效。
- ✅ 正确：
transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0.1s - ❌ 无效：
transition: grid-template-columns 0.3s（fr是离散值，不支持过渡） - ❌ 卡顿：
transition: height 0.3s或width——触发重排，尤其 Grid 项多时明显掉帧 - 别漏
ease：显式声明比依赖浏览器默认更稳妥，旧版 Safari 对隐式ease处理不一致
移动端和无障碍场景下 hover 失效怎么办
iOS Safari 真机默认不触发 :hover（除非模拟器或启用了“辅助触控”），纯 CSS :hover+transform 在真机上大概率没反应。
- 用媒体查询降级：
@media (hover: none) or (pointer: coarse)中移除transform，仅保留背景色或阴影变化 - 对动画敏感用户：
@media (prefers-reduced-motion: reduce)中彻底关闭transition与transform - 复杂交互（如悬停跨行/挤压邻项）绕不开 JS，CSS 无法动态读取容器尺寸并实时重算比例
最常被忽略的其实是 position: relative —— 没它，z-index 就是摆设，放大后谁压谁，完全由 DOM 顺序决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
