重叠可点击区域需同时解决视觉层叠、事件捕获、语义正确和可访问性四问题；推荐绝对定位平级按钮或Grid共享grid-area实现，禁用pointer-events:none用于交互元素。
重叠多个可点击区域不是“加个 z-index 就完事”，而是要同时解决视觉层叠、事件捕获、语义正确和可访问性四个问题。直接嵌套 <div> 并设 <code>pointer-events: none 会让上层失焦、键盘不可达，也破坏屏幕阅读器顺序。
用绝对定位 + 独立 DOM 实现真重叠按钮
视觉上重叠、逻辑上各自独立，是最健壮的做法。不要把两个按钮塞进同一个父容器再用 position: absolute 堆一起——那样 DOM 层级混乱，tab 键焦点顺序和屏幕阅读器读取顺序会错乱。
正确做法是：外层设 position: relative，每个按钮都是平级子元素，各自设 position: absolute 和显式 top/left，再用 z-index 控制谁在上：
<div class="overlay-container"> <button class="btn btn-primary" style="z-index: 2;">主操作</button> <button class="btn btn-secondary" style="z-index: 1;">辅助操作</button> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
z-index只对定位元素（position不是static）生效，漏写position: relative或absolute就无效 - 两个按钮必须同级，不能是父子关系，否则
z-index会进入新的层叠上下文，互相不可比 - 给按钮加
tabindex="0"确保键盘可聚焦；用aria-label补充语义，避免仅靠位置传达功能
Grid 共享 grid-area 实现声明式层叠
如果你的重叠区域结构固定（比如一张图上多个热点按钮），display: grid 比绝对定位更干净，且天然支持响应式。
让多个元素落在同一网格单元，靠的是完全一致的 grid-area 值：
<div class="map-grid"> <img src="map.png" alt="地图"> <button class="hotspot" style="grid-area: map;" data-region="beijing"></button> <button class="hotspot" style="grid-area: map;" data-region="shanghai"></button> </div>
CSS 中只需：
.map-grid {
display: grid;
grid-template-areas: "map";
place-items: center;
}
.hotspot { grid-area: map; }
注意：
-
grid-area: map必须和grid-template-areas: "map"中的字符串**逐字匹配**，包括大小写和空格 - DOM 顺序决定默认绘制顺序：后写的
<button></button>自动压在前面的上面；想控制谁默认在前，就调换 HTML 顺序，或统一设order: 0，再给目标元素设order: -1 - 不需要
z-index也能分层，但若需微调（比如某按钮必须永远在最上），得先加position: relative再设z-index
处理点击穿透时 pointer-events 的陷阱
pointer-events: none 看似能“透过去”，但它会让元素彻底退出交互流：无法聚焦、无法触发 click、keydown，也不响应 hover。它只适合纯装饰层（比如半透明遮罩）。
如果你需要“点上层时也触发下层”，有且仅有两种靠谱路径：
- 用事件委托 +
e.target判断：把监听器挂在共同父容器上，通过e.target.classList.contains("upper-btn")分发逻辑 - 动态切换
z-index：点击上层时，把它z-index设为最低，暴露出下层；再点一次切回来——这要求所有元素都参与层级管理，且不能依赖pointer-events: none
千万别这么写：
<div class="outer" style="pointer-events: none"> <button class="inner">我点不到</button> </div>
因为 .outer 的 pointer-events: none 会让整个子树失效，.inner 也点不了。
移动端 touch 事件穿透的兼容处理
iOS Safari 对重叠区域的点击判定比桌面严格：手指落点若在多个元素交叠区，可能只触发一个，甚至不触发任何 click。这不是 bug，是为防止误触做的优化。
缓解方案有限但有效：
- 确保每个可点击区域有足够物理尺寸（至少 44×44px），避免靠边或过窄重叠
- 如果必须用遮罩层（如弹窗蒙版），遮罩本身设
pointer-events: none，但遮罩内的按钮保持pointer-events: auto（iOS 支持该组合） - 避免在重叠区同时监听
click和touchstart，它们触发时机不同，容易冲突；统一用click即可，现代 iOS 已优化其延迟
真正难的不是让它们“看起来重叠”，而是让它们在键盘、屏幕阅读器、触控、鼠标下行为一致——这意味着你得放弃“视觉即逻辑”的偷懒思路，从 DOM 结构开始就按功能拆分，而不是靠 CSS 强行叠在一起。
