先用开发者工具「选择元素」悬停按钮观察高亮是否完整，再上移鼠标定位遮挡元素；遮挡本质是事件捕获被上游元素截断，需结合position、pointer-events和层叠上下文综合修复。
按钮被其他元素挡住，怎么快速定位遮挡源
先打开开发者工具，用「选择元素」工具悬停目标按钮，观察高亮框是否完整；再缓慢向上拖动鼠标，看是否中途被另一个 <div>、<code><header></header> 或装饰性 <img> 接管高亮——一旦出现，就说明它在 DOM 顺序或层叠上下文中盖住了按钮。
常见遮挡元凶包括：
-
float: right导致父容器塌陷，下方margin-top元素视觉上浮起覆盖按钮右半区 - 动态插入的按钮未设
position，z-index完全无效（static元素不参与层叠） - 背景遮罩层如
.bg-backdrop设了position: fixed却没配z-index，实际层级高于按钮 - 伪元素（
::before/::after）或图标<img>没加pointer-events: none，默默拦截点击流
修复遮挡必须显式控制 position 和 pointer-events
遮挡不是样式“看起来重叠”，而是事件捕获路径被上游元素截断。单纯调 z-index 很可能无效，尤其当父容器意外触发新层叠上下文（比如加了 opacity: 0.99 或 transform: scale(1)）时，子元素的 z-index 只在内部比大小。
真正有效的操作是：
- 给按钮本身设
position: relative（或absolute/fixed），让它进入层叠上下文 - 给所有非交互性遮挡物（如装饰箭头、背景图、
::before）加pointer-events: none - 避免对非定位元素设
z-index: -1—— 它不会压到下面，反而可能让自身不可见且仍占布局空间 - 移动端补一句
touch-action: manipulation，防止 Safari 吞掉触摸事件
图片热点或悬停切换图的可点击区域失效
这类问题常被误判为“JS 没绑好”，其实是渲染层遮挡：比如用 content 替换 <img> 的伪元素、或 <map></map> 热点坐标未随缩放重算，都会导致点击落空。
关键检查点：
-
<img usemap="#myMap">和<map name="myMap"></map>的字符串必须**完全一致**（不含#，大小写、空格、连字符都不能差） - 缩放图片时，
<map></map>的coords会偏移——要么固定图片尺寸 + 媒体查询切图，要么改用 SVG - 悬停切换图若用
::before覆盖原图，必须确保该伪元素设了pointer-events: none，否则它永远抢在链接前响应点击 - 移动端热区必须 ≥44×44px，圆形热点半径至少 22，矩形宽高均不能小于 44
表格、标签栏、整块背景这些“大区域”点不中
它们点不中，往往不是没加 onclick，而是内部存在大量“不可点击缝隙”：表格的 border-spacing、标签栏的默认 display: inline、链接的内联状态，都会让点击热区远小于视觉范围。
实操要点：
- 表格要加
border-collapse: collapse消除间隙，并统一<td>/<code><th> 的 <code>padding，再用event.target.closest('td, th')判断真实点击位置 - 标签栏用
<div> 实现时，必须加 <code>tabindex="0"、cursor: pointer，并监听click和keydown（回车/空格） - 想让整个卡片可点，别包一层
<div> 再监听，直接把 <code><a></a>设为display: block，背景、padding、边框全加在它身上 - 所有大区域点击都需在真机测试——模拟器对触控精度过于宽容，热区在手机上点不中，等于没做
最易被忽略的一点：遮挡问题从来不是单个 CSS 属性能解决的，它横跨 DOM 顺序、层叠上下文、事件捕获路径和移动端触控规范。修一个 z-index 不如查一遍 pointer-events 和 position 是否到位，尤其当页面有动态插入、伪元素或固定导航时。
