z-index不生效主因是未设置position属性；必须配合relative或absolute才能生效，且需注意层叠上下文、响应式适配及负边距调试技巧。
z-index 不生效？先确认是否设置了 position
卡片堆叠失败，90% 是因为只写了 z-index: 3 却没配 position。z-index 在 position: static（默认值）下完全无效。必须显式设置为 position: relative 或 position: absolute 才能触发层叠控制。
常见错误场景：
- 给所有卡片加了
z-index，但父容器没设position: relative，导致absolute卡片相对视口定位，错位飞走 - 父容器加了
opacity: 0.99或transform: scale(1)，意外创建新层叠上下文，子卡片的z-index只在内部有效，无法穿透到外层 - 用
top: -8px做偏移，结果影响父容器高度计算或触发布局重排；改用transform: translateY(-8px)更干净，不干扰文档流
用 transform + transition-delay 实现逐张悬停展开
纯 CSS 实现“鼠标悬停时卡片像扇形/弧线依次弹出”，关键不是靠 top/left，而是组合 transform 与递增的 transition-delay。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 卡片统一设
position: absolute，父容器设position: relative并限制尺寸 - 每张卡片用
:nth-child(n)分别设置不同transform: translate(x, y) rotate(deg)，比如.card:nth-child(1) { transform: translate(0, 0) rotate(0deg); } - 悬停时统一触发：
.card-container:hover .card { transition: transform 0.4s ease; }，再对每个子项加transition-delay: calc((n - 1) * 0.08s)（CSS 变量或预处理器更易维护） - 若要扇形展开，记得设
transform-origin: bottom center，否则旋转中心不对，视觉歪斜
负边距（negative margin）怎么调才自然不穿帮
用 margin-top: -12px 或 margin-left: -16px 比 transform 更轻量，适合静态堆叠，但数值选错容易露底、裁圆角、压阴影。
调试建议：
- 起始值优先试
-12px，安全范围是-8px到-24px；超过-24px多数会切掉border-radius的圆角 - 如果卡片有
box-shadow，过大的负边距会让多层阴影重叠发虚，可配合filter: drop-shadow()单独控制某一层阴影 - 务必关掉
transition调试——DevTools 里直接看 computed 的margin和z-index，比猜快得多 - 避免用正数
margin堆叠，那会把整组推离基线，后续响应式容易崩
响应式与触摸设备的兼容陷阱
悬停效果在手机上根本不会触发，强行保留 hover 逻辑会导致交互断裂。
必须处理的边界情况：
- 小屏幕（如
max-width: 768px）应直接取消重叠，改用flex-direction: column垂直排列，保证可读性与点击热区 - 触摸设备不能依赖
:hover，可用@media (hover: none)或 JS 检测matchMedia('(hover: none)')来降级为点击展开 - 如果卡片用了
will-change: transform做性能优化，注意它也会创建新层叠上下文，和opacity效果一样，可能锁死z-index作用域
最常被忽略的是层叠上下文的嵌套深度——一个卡片里再套一层带 transform 的遮罩，就又封了一层 z-index 空间，这时外部高 z-index 的按钮也盖不住它。
