卡片层级混乱的根源是父级意外创建层叠上下文，导致子元素z-index失效；应检查position、opacity、transform等触发属性，统一在最外层容器管理z-index。
卡片组件重叠层级混乱，核心问题往往不是 z-index 写得不对，而是父级元素意外创建了层叠上下文，把子元素的 z-index 隔离在局部范围内——导致你调高子卡片的 z-index 也没用。
检查父容器是否创建了层叠上下文
以下任意 CSS 属性会让元素成为“层叠上下文根”，其子元素的 z-index 只在这个父容器内部生效：
- position 值为 relative / absolute / fixed / sticky，且设置了 z-index（哪怕只是 z-index: 0）
- opacity 小于 1（如 opacity: 0.99）
- transform 不为 none（如 transform: translateZ(0)、scale(1)）
- filter 不为 none（如 filter: blur(0)）
- will-change 指定了影响层叠的属性（如 will-change: transform）
- isolation 设为 isolate
用浏览器开发者工具逐级查看卡片的父级（尤其是直接包裹卡片的容器），看是否有上述任一属性被启用。常见“隐形凶手”是：为了触发硬件加速加了 transform: translateZ(0)，或为了过渡加了 opacity: 1（但实际写了 0.99），这些都会悄悄创建新层叠上下文。
统一管理层级，避免嵌套 z-index 竞争
不要让多个卡片各自设置 z-index，尤其不要在不同层级的父容器里分别设 z-index。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 只在**最外层卡片容器**（比如 .card-list 或 .grid）上设置 position: relative，不设 z-index
- 所有卡片本身设 position: relative，并用 同一套 z-index 数值体系控制顺序（例如 hover 卡片 z-index: 10；选中卡片 z-index: 20；拖拽中卡片 z-index: 30）
- 确保卡片之间没有中间父级创建额外层叠上下文——必要时给中间容器加 z-index: auto 或移除触发属性
调试小技巧：快速定位“层叠断层”
在开发者工具中临时给可疑父元素加：
-
outline: 2px solid red;—— 看结构范围 -
z-index: auto !important;—— 强制取消其层叠上下文（仅调试用） -
opacity: 1 !important;或transform: none !important;—— 关闭常见触发器
如果加完后卡片层级突然正常了，就确认是这个父级在“截断”z-index 作用域。
基本上就这些。理清谁创建了层叠上下文，再把 z-index 收归到同一平面管理，卡片重叠就不再“各管各的”。
