area标签不支持z-index，点击优先级由HTML中书写顺序决定，后写的area优先响应；coords重叠会导致点击歧义，唯一可靠方案是按优先级从高到低在中从前到后排列area元素。
area 标签本身不支持 z-index，无法重叠或调整层级顺序——所有热区默认在同一平面，点击行为由 DOM 顺序和浏览器实现决定，不是靠 CSS 控制。
area 点击区域为什么会“错位覆盖”？
这不是真正的视觉重叠，而是多个 <area> 共享同一片像素区域时，浏览器按 HTML 中出现的先后顺序决定响应哪个。后写的 <area> 会优先捕获点击（类似“上层遮挡”），但没有视觉反馈、不支持 z-index、也无法用 pointer-events 调整。
- 常见现象：明明点了 A 区域，却跳转到 B 的
href—— 很可能 B 的<area>在 HTML 里写在 A 后面，且 coords 完全覆盖了 A - coords 值只要相交（哪怕只重叠 1px），就存在点击歧义；浏览器不会做“面积判断”，只做“是否落在该 area 内”的布尔判断
- poly 形状比 rect/circle 更容易因顶点顺序或坐标精度导致意外重叠
如何安全控制热区响应优先级？
唯一可靠方式是显式管理 <area> 在 <map></map> 内的书写顺序，并确保 coords 尽量不重叠。不要依赖“视觉位置”或“逻辑重要性”来排序。
- 把最常用、最高优先级的区域写在
<map></map>最前面（不是最后）—— 因为多数浏览器按文档流从上到下匹配，第一个命中即触发 - 若必须共存重叠区域，拆成互斥子区域：比如原
rect是 (0,0,200,150)，想在右上角加个独立按钮，就把它切成三块：(0,0,150,150)、(150,0,200,50)、(150,50,200,150)，避免任何 coords 交叉 - 用
alt和aria-label明确标注每个区域用途，辅助技术会按 DOM 顺序读出，顺序错会导致语义混乱
为什么不能给 area 加 position 或 transform？
<area> 是替换元素（replaced element），没有盒模型，不参与 CSS 布局，所有定位、变换、层叠相关 CSS 属性对其完全无效。试图写 style="z-index: 999;" 或 transform: scale(0.9) 都会被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- 它只依赖
coords和父<img alt="HTML多个区域映射怎么重叠处理？层级顺序调整方案" >的原始尺寸计算点击范围 - 响应式缩放后 coords 失效，不是因为样式没生效，而是像素坐标没重算——必须用 JS 动态更新
coords属性值本身 - 真正需要复杂交互层级时，
<area>已到能力边界，应直接换用<svg></svg>或 Canvas + 事件坐标映射
热区顺序不是样式问题，是结构问题。coords 重叠 + DOM 顺序错乱，是线上图像映射失效最隐蔽也最难 debug 的组合原因。
