按钮点不动的问题几乎肯定出在 pointer-events 或 z-index 与定位配合失效上，而非图片本身遮挡；需检查 dom 顺序、pointer-events 设置、层叠上下文及 position 是否生效。
按钮在底图上显示正常，却点不动——问题几乎肯定出在 pointer-events 或 z-index 与定位的配合失效上，而不是图片本身“挡住了”按钮。
为什么 <img> 或背景图会拦截点击事件
即使底图元素（比如 <img src="bg.jpg"> 或带 background-image 的 <div>）视觉上在按钮下方，只要它 DOM 位置在按钮之前、且未禁用指针事件，就会捕获鼠标事件并终止冒泡。浏览器不按“看起来谁在上面”来派发事件，而是按 DOM 顺序 + <code>pointer-events + 定位上下文综合判断。
-
pointer-events: auto（默认）时，哪怕z-index很低，该元素仍会响应 hover/click - 若底图是
<img>标签，它天然参与事件流；若是伪元素或背景图，需确认是否套在可交互容器里 - 常见误判：以为调高按钮
z-index就能解决，但若底图父容器创建了独立层叠上下文（如position: fixed+z-index），按钮的z-index只在本上下文中生效，无法跨上下文“穿透”
position 和 z-index 必须成对出现才有效
z-index 对 position: static 元素完全无效。动态插入的按钮、或未显式设定位的按钮，即使写了 style="z-index: 999"，也等于没写。
- 必须至少设置
position: relative、absolute、fixed或sticky - 若底图容器用了
position: fixed或transform，它会创建新层叠上下文，此时按钮的z-index需要相对于该上下文设置，而非整个页面 - 验证方式：在开发者工具中选中按钮，看 computed 样式里
position是否为static；如果是，z-index一栏会显示auto且置灰
底图元素该加 pointer-events: none 还是调层级
优先加 pointer-events: none，简单直接，副作用最小。只有当底图本身需要局部响应事件（比如某区域要 hover 放大）时，才考虑调整层级。
- 对纯装饰性底图（如全屏背景图、水印
<img>），直接给其标签或父容器加style="max-width:90%" - 若底图是 CSS
background-image，则无需额外处理——背景图本身不参与事件流，问题一定出在承载它的容器（比如一个空<div>）上 <li>避免滥用 <code>z-index堆叠：设到 9999 不如理清层叠上下文结构；多个position: relative容器嵌套时，z-index作用范围容易被误判
真正麻烦的不是怎么写 CSS，而是 DOM 顺序和层叠上下文的隐式创建——它们不会报错，也不会在样式面板里高亮，只能靠开发者工具逐层 hover 验证覆盖关系。动手前先打开 Elements 面板，把鼠标悬停在按钮上，看高亮框是否完整；再往上挪一点，看是不是某个“看不见”的容器正盖在它上面。
