卡片重叠时元素消失主因是z-index被父容器层叠上下文截断；需统一设position:relative、避免flex/grid父容器、慎用负z-index，优先用transform偏移并注意点击穿透问题。
卡片重叠时元素消失？检查z-index是否被父容器截断
负值z-index本身合法，但失效往往是因为父元素设置了position: relative或position: absolute且没配z-index，导致子元素的z-index在局部层叠上下文中被限制。
实操建议：
- 给需要参与重叠排序的卡片统一加
position: relative（或absolute/fixed），否则z-index不生效 - 若卡片嵌套在
position: relative容器中，且该容器没有显式z-index，它会创建新的层叠上下文，子元素的负z-index只能压到这个容器内部，无法穿透出去 - 想让某张卡“沉到底下”，除了设
z-index: -1，还要确保它的父容器层叠等级不高于其他卡片的父容器
用transform: translate()偏移比top/left更安全
用top和left做偏移时，如果父容器是position: static（默认），这些属性会被忽略；而transform不依赖定位上下文，只要元素可渲染就能动。
实操建议：
- 优先用
transform: translate(-20px, 16px)代替top: 16px; left: -20px，避免因父级未设position导致偏移失效 -
transform触发硬件加速，动画更顺滑；但过度使用可能增加图层数量，影响性能（尤其移动端） - 注意：
transform不影响文档流，不会挤占其他元素位置；而top/left配合position: absolute会脱离流，这点行为一致
IE11对负z-index的支持有隐藏坑
IE11支持负z-index，但前提是元素必须有position且父容器不能是display: flex或display: grid——这两者在IE11中会意外创建强层叠上下文，把负值z-index锁死在内部。
实操建议：
- 兼容IE11时，避免把带负
z-index的卡片放在display: flex容器里；改用float或inline-block布局父级 - 测试时直接看
z-index: -1的卡片是否被背景色盖住，而不是只看是否“看起来重叠了”——IE11常表现为视觉重叠但层级没变 - 如必须用Flex，可在卡片上加
position: relative; z-index: 0先创建独立层叠上下文，再在其子元素上设负值
重叠卡片的点击穿透问题怎么破
当上层卡片透明、下层卡片有z-index: -1时，鼠标事件可能直接穿透过去，点不到上层元素。这不是bug，而是浏览器按层叠顺序分发事件的正常行为。
实操建议：
- 给上层卡片加
pointer-events: auto（默认值），确保它拦截事件；不要误设为none - 如果上层只是装饰性半透蒙版，又想点到下层按钮，就别用
z-index: -1，改用z-index: 1+background: rgba(0,0,0,0.1)模拟“沉底”视觉，实际仍在顶层 - 调试时打开浏览器开发者工具的“Rendering > Paint flashing”或“Layers”面板，确认各卡片是否真的在不同合成层，避免误判重叠效果
负z-index不是万能垫片，它的真实作用范围永远受限于最近的层叠上下文边界——这个边界常常藏在你没加z-index的position: relative父容器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
