按钮不可点击主因是视觉遮挡而非js绑定失败，需检查是否被兄弟元素、遮罩层或transform父容器遮盖，并确保按钮显式设置position及足够z-index。
absolute 容器里按钮点不了，先看它被谁盖住了
按钮在 position: absolute 的父容器里不可点击，90% 不是 JS 绑定失败，而是被其他元素视觉遮挡——鼠标实际点中的是上层元素，事件根本没传到按钮。打开开发者工具，把鼠标悬停在按钮上，如果高亮区域跳到别的 DOM 节点（比如后面一个 div 或遮罩层），就坐实了遮挡。
常见遮挡源包括：
• 后续兄弟元素设置了 position: relative 但没设 z-index，默认层叠顺序高于 static 元素
• 全屏遮罩层（如 .bg-backdrop）用了 position: fixed，自动创建新层叠上下文，且其 z-index: 0 已压过未定位的按钮
• 父容器本身有 transform、filter 等属性，导致子元素的定位上下文异常
button 必须显式声明 position 才能生效 z-index
z-index 对 position: static 元素完全无效——这是最常被忽略的前提。动态创建或内联写的按钮，若没设 position，哪怕写了 style="z-index: 999" 也毫无作用。
- 必须给按钮加
position: relative、absolute或fixed（推荐relative，不影响布局） -
z-index值要足够高，建议 ≥ 100；若遮罩层用了z-index: 50，按钮至少设101 - 避免用
setAttribute('style', ...)拼接样式，改用element.style.position = 'relative'更可靠
遮罩层场景下优先用 pointer-events: none
如果按钮被一层纯装饰性遮罩（如模糊背景、半透明蒙版）盖住，且遮罩本身不需要交互，直接加 pointer-events: none 是最快解法：
```css
.overlay {
position: absolute;
z-index: 50;
pointer-events: none; /* 鼠标穿透 */
}
.overlay > .close-btn {
pointer-events: auto; /* 按钮自己仍可点 */
}
```
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意：pointer-events: none 会让整个遮罩层及其所有子元素失效，所以需要交互的控件（如关闭按钮）得单独设回 auto。
避免 transform 破坏 fixed/absolute 定位上下文
父容器若带 transform（哪怕只是 transform: translateZ(0)），会强制子元素的 position: fixed 或某些 absolute 行为退化为相对该父容器定位——按钮看似在右上角，实际绑定的是父块区域，滚动或缩放时就会“飘”。
修复方式：
• 把需要 fixed 的按钮移出带 transform 的容器，挂到 body 直接子级
• 或改用 will-change: opacity 替代 transform: translateZ(0) 来触发 GPU 加速，不破坏定位上下文
• 不要依赖父容器 position: relative + transform 双重设置来“微调”绝对定位，容易埋坑
真正麻烦的不是写错一行 CSS，而是多个定位属性叠加后形成的隐式层叠上下文嵌套——它不会报错，只会在某次滚动、某次弹窗、某次动态插入后突然让按钮失灵。排查时盯住 position 和 z-index 的组合是否满足生效前提，比反复检查 JS 绑定更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
