根本原因在于.grid-item未设position: relative，z-index不生效；且.grid-container若含transform、opacity<1或filter会创建隐式层叠上下文，锁死子项z-index。必须三步：设position: relative激活z-index、hover时显式提级z-index、配合transform-origin与overflow控制。
为什么悬停放大后卡片被相邻项盖住
根本不是 z-index 数值不够大，而是 .grid-item 没有定位上下文，z-index 根本不生效。Grid 项默认是 position: static，此时写 z-index: 999 和没写一样。更隐蔽的问题是：如果 .grid-container 上加了 transform、opacity: 0.99 或 filter: blur(0)，它会悄悄创建一个新层叠上下文，把所有子项的 z-index 锁死在内部——哪怕你 hover 时设了 z-index: 9999，也盖不过同级的其他容器。
必须做的三件事：position、z-index、transform-origin
只改 transform: scale() 不够，得配合基础层叠控制：
-
.grid-item { position: relative; }—— 激活z-index，不加这句一切白搭 -
.grid-item:hover { z-index: 100; }—— 显式提级，确保高于未 hover 的兄弟项（默认z-index: auto） -
.grid-item { transform-origin: center; }—— 防止缩放中心偏移；若网格项被align-items: stretch拉满，还要加align-self: center;确保内容居中
scale() 放大后溢出或裁切怎么办
因为 transform 不改变文档流，Grid 仍按原始尺寸分配空间，放大后内容自然“撑出来”。常见表现是边缘被父容器 overflow: hidden 截断，或遮挡邻项：
- 父容器别设
overflow: hidden，除非你真想裁剪；可改用overflow: visible - 给
.grid-item加overflow: hidden反而更可控——只裁自己，不干扰布局 - 若项内含
position: absolute元素，加transform-style: preserve-3d防失真 - 放大倍数建议控制在
1.05–1.15，超过1.15容易触发明显遮挡或边缘错位
transition 写在哪？哪些属性能动
transition 必须写在常态（非 hover）的 .grid-item 上，且只对支持插值的属性有效：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
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处理不一致
最容易被忽略的是：没有 position: relative 就谈不上 z-index 控制，放大后谁压谁，完全由 DOM 顺序决定——而这几乎总是和你想要的效果相反。
