z-index不生效的主因是父容器创建了新的层叠上下文，如opacity、transform等属性会限制子元素z-index的作用范围；需检查并调整DOM结构或CSS属性。
z-index 不生效？先确认父容器是否创建了新的层叠上下文
很多情况下 z-index 看似没用，其实不是它失效，而是你给的元素被包裹在了一个已创建层叠上下文的父级里（比如设置了 opacity、transform、filter 或 will-change 的祖先元素）。这时候子元素的 z-index 只在该局部上下文中起作用，无法“穿透”出去和外部同级元素比高低。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查目标元素及其所有父级，看是否有触发层叠上下文的 CSS 属性（尤其是
transform: translateZ(0)这类隐式触发） - 如果必须保留父级的
transform或opacity，就把需要穿透的元素提到更高层级的 DOM 位置（比如挂到<body>下），再用position: fixed或position: absolute配合 JS 动态计算位置 - 避免滥用
transform做纯位移——top/left更安全，不触发新层叠上下文
pointer-events: none 会同时禁用 hover 和点击，但子元素可以“抢回”交互
pointer-events: none 是唯一能实现视觉上“穿透”鼠标事件的方式，但它粗暴地把整个元素及其所有子元素都设为不可点。如果你只想让背景透过去，而保留上面按钮的可点击性，不能只靠一层 pointer-events: none。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对需要穿透的容器设
pointer-events: none - 对里面要响应交互的子元素单独设
pointer-events: auto（哪怕它只是个<span>） - 注意：IE11 不支持
pointer-events在非 SVG 元素上使用；移动端 Safari 对pointer-events: none在滚动容器内的表现偶尔有延迟 - 不要对表单控件（如
<input>）直接设pointer-events: none再试图用子元素恢复——它本身不支持子元素重获焦点，得换方案
绝对定位元素被遮挡？检查是否意外触发了 transform-style: preserve-3d
当你给某个祖先加了 transform-style: preserve-3d，又没配好 perspective，会导致子元素的 z-index 行为异常——看起来像被压在底下，实际是 3D 渲染顺序错乱了。
常见错误现象：
- 明明
z-index数值很大，却还是被后面出现的元素盖住 - 只有在开启 DevTools 切换一下任意样式，遮挡就突然消失（渲染树重排暴露了问题）
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有不必要的
transform-style: preserve-3d，95% 的场景根本用不到它 - 如果真要做 3D 效果，确保父容器设置了合理的
perspective，且子元素没有意外继承或重置transform - 用
will-change: transform替代transform-style来触发硬件加速更稳妥
移动端 click 事件穿透？别只盯着 z-index，先看 touch-action
在 iOS Safari 或某些安卓 WebView 中，即使 z-index 正确、pointer-events 也没问题，用户轻点一个浮层按钮，下面的元素仍可能被触发——这通常是 touch-action 导致的事件冒泡/穿透行为，和层叠无关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给浮层容器加上
touch-action: manipulation（允许点击缩放，但禁止滚动/拖拽干扰） - 如果浮层内有可滚动区域（比如弹窗里的长列表），给它单独设
touch-action: auto，避免整块被锁死 - 慎用
touch-action: none—— 它会彻底禁用所有原生手势，包括页面缩放，Accessibility 影响很大 - 不要依赖
z-index来阻止底层响应：iOS 下 touchstart/touchend 仍可能穿透，必须配合touch-action+ 事件拦截（如e.preventDefault()在合适时机）
z-index 数值。 
