热区按钮必须设固定尺寸并显式声明display: block或inline-block，禁用opacity/filter/will-change等触发新层叠上下文的属性，定位优先用right/bottom+px值，避免百分比、vw及多层transform混用。
热区按钮必须设固定尺寸 + display: block
默认的 <a> 或 <button> 是行内元素，没有宽高概念，top/left 会失效，百分比定位更不可靠。常见错误是只写 top: 12px; right: 16px; 却没控制尺寸，结果在高清屏上热区缩成一个像素点，根本点不中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
display: block或display: inline-block - 用
width和height（推荐px值），别用min-width、max-width或百分比——热区本质是点击靶心，不是响应式内容 - 若按钮纯图标（如
<i class="icon-close"></i>），必须加min-width: 44px; min-height: 44px;，否则 iOS Safari 会拦截touchstart
容器必须加 position: relative，且不能创建新层叠上下文
所有热区按钮的 position: absolute 都依赖最近的已定位祖先。如果外层 <div> 没设 position: relative，按钮就会相对于 <body> 定位，坐标完全漂移；更隐蔽的问题是：给该容器加了 opacity: 0.99、filter: blur(1px) 或 will-change: transform，会意外创建新层叠上下文，导致 z-index 失效，按钮被图片遮住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 外层包裹
<div>必须有position: relative，哪怕不写top/left - 禁用任何可能触发新层叠上下文的属性，尤其避免在该容器上用
will-change - 按钮自身设
z-index: 10没用，先确保其父容器（即那个position: relative的<div>）有z-index: 1
坐标以图片左上角为原点，优先用 right/bottom 而非 calc()
热区要钉在大图右上角、底部居中等位置时，用 right: 16px; top: 12px; 比 left: calc(100% - 16px); 更稳。后者依赖盒模型计算，在 box-sizing: border-box 与 content-box 混用、或父容器有 padding 时容易偏移 1–2px，微小热区直接失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右上角按钮：用
top: 12px; right: 16px; - 底部居中按钮：用
bottom: 24px; left: 50%; transform: translateX(-50%); - 绝对避免在热区定位中混用
vw、%和px——大图缩放时不同单位缩放节奏不一致，热区必然错位
移动端点击失效？检查 pointer-events 和 transform 影响
热区在桌面端正常，移动端点不动，大概率是 pointer-events 被继承阻断，或 transform 干扰了 hit testing。Safari 对 transform: scale(0.8) 后的元素点击坐标计算特别敏感，视觉上点中了，事件却触发在隔壁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器“Computed”面板确认热区实际生效的
pointer-events值，不是看声明值 - 避免在热区上叠加多层
transform，比如同时用scale和translate - 若必须缩放图标，同步放大
min-width/min-height：缩放 0.7 倍 →min-width: 63px（44 ÷ 0.7 ≈ 63） - 伪元素扩展点击区？可以，但必须显式写
pointer-events: auto，且父元素不能是inline
精准钉住微小热区，难点不在“怎么放”，而在“怎么锁死基准、怎么兜住边界、怎么绕过浏览器隐式规则”。尤其是 will-change 和 transform 的组合，真机测试前几乎看不出问题，一上手就失灵。
