z-index调高仍点不到元素，主因是pointer-events设置和层叠上下文干扰；需检查pointer-events是否为none、父级是否创建了独立层叠上下文、以及overflow裁剪导致的视觉误判。
为什么 z-index 调高了还是点不到元素？
常见错觉是只要把 z-index 设得足够大，上层元素就一定“盖住”下层、下层就一定点不到——但实际点击是否生效，取决于 pointer-events 和层叠上下文（stacking context）的共同作用。比如一个半透明遮罩层设置了 z-index: 9999，但没设 pointer-events: none，它就会拦截所有鼠标事件，导致背后按钮完全无法点击。
pointer-events: none 的适用边界
这个属性让元素“变透明”给鼠标事件，但它不是万能开关，需注意以下限制：
- 仅对鼠标/触控事件生效（
click、hover、mousedown），不影响键盘焦点（tab导航仍可能进入该元素） - 设在父容器上时，其所有子元素默认继承
pointer-events: none，除非显式重写为auto - 不支持 IE10 及更早版本（如需兼容，得用 JS 模拟或改用层级隔离）
- 若元素本身需要响应部分事件（比如只禁 hover 但保留 click），不能靠它，得换思路
用层叠上下文隔离点击区域
当多个绝对定位元素堆叠混乱，单纯调 z-index 容易失效，因为 z-index 只在同一个层叠上下文中起作用。例如：
.modal {
position: relative;
z-index: 1000; /* 创建新层叠上下文 */
}
.modal::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: -1; /* 这里无效：-1 相对于 .modal 的上下文，不是全局 */
}正确做法是避免在已创建层叠上下文的祖先上依赖负 z-index，改为：
立即学习“前端免费学习笔记（深入）”；
- 把遮罩层和可点击内容放在同一层叠上下文中（同级兄弟元素）
- 或用
isolation: isolate显式创建独立上下文，再分别控制z-index - 确保触发点击的元素没有被
transform、opacity 、will-change等隐式创建层叠上下文的属性干扰
调试点击失效的三步检查法
遇到点不动时，按顺序确认：
- 打开浏览器开发者工具 → 选中目标元素 → 查看
pointer-events计算值是否为none（包括继承值） - 检查该元素及其任意父级是否设置了
z-index且同时满足position非static（否则未创建层叠上下文，z-index无效） - 用
Elements面板的:hover状态切换，观察鼠标悬停高亮是否落在预期元素上；如果高亮跳到别的元素，说明视觉层级和事件捕获层级不一致
最常被忽略的是：父容器设置了 overflow: hidden 且子元素 position: absolute 超出范围，此时即使 z-index 正确，视觉被裁剪也会让人误判点击区是否存在。
