按钮点击失效但样式正常，90%是上层元素物理遮挡：先用开发者工具检查高亮是否被其他元素接管；常见原因包括float导致的覆盖、动态创建按钮未设position而z-index无效、装饰性元素未设pointer-events:none。
按钮点击失效但样式正常？先查是否被视觉遮挡
按钮显示正常、事件也绑了，却点不动——90% 是上层元素物理覆盖了它的可点击区域，不是 JS 问题。打开浏览器开发者工具，用 Elements 面板的「选择元素」工具悬停按钮，看高亮框是否完整；再拖动鼠标缓慢上移，观察是否中途被另一个 div 或 .col 高亮接管。一旦发现覆盖，就进入布局排查阶段。
float: right 导致按钮被下方 margin-top 元素盖住
常见于 Bootstrap 表单中：Email 输入框右侧加了 style="float: right" 的查重按钮，下方紧邻一个 <div class="col text-center"> 里放注册按钮，并设了 style="margin-top: 100px"。问题在于：margin-top 不会“推开”上方容器，反而让该容器的渲染边界向上延伸，直接覆盖了浮动按钮的右半区域。
- 临时验证：给 Email 按钮加
outline: 2px solid red，再在控制台执行document.querySelector(".col.text-center").style.marginTop = "0"，按钮立刻可点 - 根本解法不是调
z-index，而是切断浮动干扰——移除所有float: right和position: relative - 改用 Flex 布局：把输入框和按钮包进
<div class="d-flex">，按钮加ms-2间距，语义清晰且无塌陷风险
动态创建的按钮点不了？检查 position 和 z-index 是否生效
用 document.createElement("button") 插入的按钮默认是 position: static，此时设 z-index 完全无效。若它被 .bg-backdrop（position: fixed）盖住，本质是没参与层叠上下文。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须显式设置
button.style.position = "relative"（或absolute/fixed），再配zIndex - 注意父容器是否意外触发新层叠上下文：比如
opacity: 0.99、transform: scale(1)、filter: blur(0)都会让子元素的z-index只在内部比较，无法和外部竞争 - 移动端还要补
touch-action: manipulation，否则 Safari 可能吞掉整个触摸流
装饰性图片/伪元素挡住按钮？优先用 pointer-events: none
不是所有遮挡都要堆 z-index。比如按钮旁有个 <img class="arrow"> 或 ::before 箭头，视觉在下、却抢了点击事件——这是因为 pointer-events 默认为 auto，只要 DOM 顺序在前，就会拦截事件路径。
立即学习“前端免费学习笔记（深入）”；
- 给图像或伪元素加
pointer-events: none，按钮立刻恢复响应，图像仍可见 - 该属性不继承，必须直接作用于遮挡元素本身
- 避免用
z-index: -1压图像：非定位元素上设负值无效，且易引发全局层级混乱
最常被忽略的是：遮挡未必来自「看起来更高」的元素，而可能来自 DOM 顺序靠前、又没关 pointer-events 的普通块级元素。验证永远比猜更快——用开发者工具选中目标按钮，再逐层往上 hover，看哪个父级或兄弟节点突然接管了高亮。
