z-index只对定位元素生效，不设position等于白写；必须设为relative、absolute、fixed或sticky才能激活z-index，static下z-index被浏览器完全忽略。
z-index只对定位元素生效，不设position等于白写
直接给卡片加z-index没反应？八成是漏了position。CSS 规则很硬：只有position值为relative、absolute、fixed或sticky的元素，z-index才起作用。static（默认值）下写的z-index: 999会被浏览器完全忽略。
实操建议：
- 卡片用
position: relative最稳妥——不脱离文档流，不影响布局，仅用于激活z-index - 若需精确定位（比如右上角徽章），子元素用
position: absolute，但父容器必须有position: relative作参考 - 避免在卡片上直接写
z-index: 9999，数值过大容易和弹窗、提示框等第三方组件冲突
层叠上下文会“截断”z-index，父子层级要理清
两张卡片明明z-index一高一低，却还是盖不住？大概率是其中一个卡片或其父容器触发了新的层叠上下文（stacking context），把z-index锁死在内部了。
哪些操作会悄悄创建新层叠上下文：
-
transform非none（比如transform: translateY(-8px)） -
opacity小于1 -
filter非none（如blur(1px)） -
isolation: isolate（主动创建，有时是解法，有时是坑）
验证方法：Chrome DevTools → Elements → 右键检查卡片 → Computed 面板里搜 “Stacking Context”，有提示就说明被隔离了。
transform位移不等于z-index，但影响视觉堆叠感
纯靠z-index只能控制谁遮谁，看不出“叠起来”的物理感。真实卡片堆叠需要配合transform模拟错位。
关键点：
- 用
transform: translateY()和translateX()，别用top/left或margin——前者不触发重排，后者可能破坏布局流 - 位移量建议4–12px：太小看不出层次，太大像散架
-
transform本身会创建新层叠上下文，所以如果卡片已用transform做偏移，再设z-index时得确认是否还在同一上下文里 - 安卓 WebView 上
transform可能导致模糊，加backface-visibility: hidden缓解
响应式场景下z-index容易失效，别只靠数值大小
PC端好好的堆叠，一到手机上就乱序？常见原因是媒体查询里没同步更新z-index，或者滚动容器（比如-webkit-overflow-scrolling: touch）在旧版 iOS 中强制创建独立层叠上下文。
更可靠的做法：
- 用
display: grid或display: flex替代纯绝对定位——Grid 容器天然支持同区域图层叠加，且z-index在子项间仍有效 - 移动端真机测试必做，模拟器常不复现
z-index渲染异常 - 需要穿透所有层级置顶（比如全局 toast），改用
position: fixed+inset，绕过 DOM 层叠限制
真正难的不是写几行z-index，而是判断当前卡片处在哪个层叠上下文中——它上面有没有“官”，下面有没有“墙”。搞不清这个，调再多数值都是隔靴搔痒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
