绝对定位元素点不了是因为上层透明遮罩拦截了点击事件；需用开发者工具检查覆盖元素，通过pointer-events: none穿透或修复层叠上下文问题。
为什么绝对定位元素点不了：上层透明遮罩在“吃”点击
不是你的 click 事件没绑，也不是 JavaScript 写错了——大概率是某个看不见的元素正稳稳盖在它上面，把鼠标事件全拦了。这种遮罩常是空 div、伪元素 ::before/::after，或设置了 opacity: 0.99 的容器，视觉上“空”，但 DOM 里真占位、真拦截。
- 用浏览器开发者工具右键点击目标元素 → “检查”，看高亮框是否跳到别的标签上（比如一个父级
section或相邻div） - 临时给可疑元素加
outline: 2px solid red，确认它是否真实存在且覆盖目标区域 - 重点排查：父容器是否用了
transform、opacity 、<code>filter或will-change——这些会悄悄创建新层叠上下文，让z-index失效，导致你以为“调高 z 就行”，其实根本没比对上
pointer-events: none 是最直接的穿透解法
如果确认遮罩只是视觉装饰、不需要交互，就别跟 z-index 死磕了。给遮罩层加 pointer-events: none，事件立刻穿透到底层可点击元素。这是 CSS 层面最轻量、最精准的干预方式。
-
pointer-events: none只影响鼠标/触控事件，不影响布局、动画、焦点（tabindex）或屏幕阅读器 - 该属性可继承：设在父元素上，子元素默认也失效；若遮罩内有关闭按钮等需交互的子元素，必须显式给它加
pointer-events: auto - IE11 及更早版本不支持，现代项目基本可忽略；别乱试
visible、fill等值——普通 HTML 元素只认auto和none，其余会被忽略
z-index 不生效？先确认它有没有“资格”比较
z-index 不是万能数字，它只对已定位元素（position 为 relative、absolute、fixed 或 sticky）生效，而且只在**同一层叠上下文内**起作用。父级一个 transform: translateY(0) 就可能让它彻底失效。
- 打开开发者工具 → “Computed” 面板，查目标元素的
z-index是否显示为具体数值（非auto） - 逐级往上查它的祖先元素，看是否有任意一个设置了
transform、opacity 、<code>filter、will-change或contain——这些都会创建新的层叠上下文 - 修复思路不是硬调更大数字，而是：要么移除触发属性，要么把需要置顶的元素提到那个新上下文之外（比如挂到
body下）
别混淆视觉隐藏和事件屏蔽
opacity: 0 和 visibility: hidden 都不会让元素“退出事件流”，它们依然能拦截点击；display: none 虽然彻底移除，但会触发重排，且无法做过渡动画。只有 pointer-events: none 在保持样式、布局、动画完全不变的前提下，精准关闭事件响应。
- 如果遮罩需 hover 效果但又不能挡点击，不能全局设
pointer-events: none，得拆成两层：一层纯视觉（设none），一层仅含交互区域（设auto） - 伪元素（如
::after）做的图标默认无法绑定事件，除非它有尺寸+内容+显式pointer-events: auto；更稳妥的做法是改用真实 HTML 元素 - 父容器设了
overflow: hidden也可能裁剪掉绝对定位元素的可点区域，临时改成visible可快速验证
z-index 值够不够大，而是你根本没意识到自己正在跟哪个层叠上下文较劲。打开开发者工具，一层层点着看，比翻文档快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
