按钮点不动90%是被遮挡而非JS错误，需用DevTools检查是否被其他元素覆盖、冒名顶替，并排查pointer-events/z-index异常；常见原因包括浮动塌陷、装饰元素拦截、绝对定位父容器创建层叠上下文及透明遮罩层覆盖。
按钮“看起来能点、点下去没反应”，90%不是 JavaScript 绑错了，而是被盖住了——得先确认它是不是真被挡着，再决定怎么掀开盖子。
用开发者工具快速验证是否被遮挡
别猜，直接看。打开浏览器 DevTools（F12），用 Ctrl+Shift+C（或 Cmd+Shift+C）激活元素选择器，悬停在按钮上：
- 如果高亮框只覆盖按钮一部分（比如右半边不亮），说明有别的元素叠在上面；
- 如果鼠标移到按钮上时，高亮却跳到旁边某个
<div>或<img>上，那就是它在“冒名顶替”； - 右键 → “Inspect” 后，在 Styles 面板里搜
pointer-events和z-index，看有没有异常值。
常见遮挡源及对应修复方式
遮住按钮的通常不是“敌人”，而是你写过的几行 CSS：一个浮动没清、一张图没设穿透、一个父容器意外建了层叠上下文。
-
浮动元素塌陷导致父容器高度不足：比如按钮用了
float: right，但父<div>没加clear: both或overflow: hidden，结果下方元素向上挤占空间——移除float改用display: flex最省心； -
装饰性图片/伪元素拦截点击：箭头、背景图、SVG 图标等若 DOM 顺序在按钮前面，又没加
pointer-events: none，就会吞掉事件——给对应.arrow或::before加这行样式即可； -
绝对定位父容器创建独立层叠上下文：比如
<form style="position: absolute; z-index: 10">里放按钮，而按钮没设position，那它的z-index就是废的——必须给按钮加position: relative才能让z-index: 100生效； -
透明遮罩层（backdrop）盖住动态按钮：JS 创建的按钮插在
.bg-backdrop前面，但没定位，z-index不起作用——补上button.style.position = "relative"和button.style.zIndex = "100"。
z-index 不生效的典型陷阱
写了 z-index: 999 还是被压着？大概率踩进了这两个坑：
立即学习“前端免费学习笔记（深入）”；
-
z-index只对非static定位生效，position: static（默认值）下写多少都无效； - 父级一旦带
z-index（哪怕只是z-index: 1）+position: relative，就创建了新层叠上下文，子元素的z-index只在内部比大小——此时调高子按钮的数值没用，得调高父级或改结构。
真正卡住人的，往往不是“怎么加 z-index”，而是没意识到某个 opacity: 0.99 或 transform: translateY(0) 已经悄悄新建了层叠上下文——这种细节在移动端和 iframe 里尤其容易翻车。
