父容器必须设 position: relative，否则绝对定位元素将相对于 body 定位导致错位；需显式设置宽高、避免创建新层叠上下文、统一 display 模式、用 transform 居中、合理使用 z-index 和可访问性属性，并在响应式场景中谨慎处理像素定位。
父容器必须设 position: relative
所有绝对定位的按钮或标签，都会找最近的已定位祖先元素作为参考。如果没设，它们就直接相对于 body 定位——坐标全乱，拖动页面或缩放时位置飘移。这不是“可选”，是硬性前提。
常见错误现象：
按钮在小屏上跑到左下角、热区点击失效、多个标记堆叠在左上角同一位置。
- 给包裹图片和按钮的外层
<div>加position: relative，哪怕不写top/left也必须加 - 图片本身建议设
width: 100%或固定宽高，避免容器塌陷导致定位基准丢失 - 不要给该容器加
opacity < 1、filter、will-change，否则会意外创建新层叠上下文，干扰z-index层级
button 或 a 标签需设 position: absolute 并固定尺寸
行内元素（如默认的 <a>）没有宽高，top/right 会失效；用百分比定位热区又容易因图片缩放不同步而偏移。必须显式控制尺寸和显示模式。
- 统一设
display: block或inline-block - 用
width和height（推荐px），别依赖min-width或max-width - 坐标以图片左上角为原点：右上角按钮写
top: 12px; right: 16px;，比left: calc(100% - 16px)更稳，避开盒模型计算误差 - 需要居中对齐某个区域？用
transform: translate(-50%, -50%)配合top/left，而不是靠margin
层级与可访问性不能只靠 z-index
z-index 不是万能开关。它只在同一个层叠上下文中生效。按钮被遮挡，往往不是 z-index 数值小，而是父容器没“撑起”足够高的上下文。
立即学习“前端免费学习笔记（深入）”；
- 按钮自身设
z-index: 2没用，先确保其父容器（即那个position: relative的<div>）有z-index: 1 - 多个按钮之间排序：同级设不同
z-index即可，比如关闭按钮z-index: 10，提示图标z-index: 5 - 热区类链接必须加
tabindex="0"和aria-label，否则键盘用户无法聚焦，屏幕阅读器不可见 - 鼠标悬停效果失效？检查是否漏了
box-sizing: border-box—— 默认content-box下加padding会让实际点击区域变大或错位
响应式场景下慎用纯像素定位
在高清屏、缩放 125% 或 viewport 变化时，top: 20px 可能变成视觉上 25px，导致按钮漂出图片边界。这不是 bug，是设计预期——你得决定要不要适配。
- 若标记位置必须严格对应图片内容（如地图坐标），保留
px，并配合 JS 监听resize动态重算，或用background-size: contain+background-position替代 img - 若只是装饰性按钮（如放大、下载），可用
vw/vh或 CSS 自定义属性做比例缩放，例如--btn-offset: 3vmax;然后top: var(--btn-offset); - 移动端触摸靶区至少
44px × 44px，px值要够大，别照搬桌面端的 16px 图标尺寸
真正麻烦的不是写几行 CSS，而是当图片尺寸动态变化、用户缩放页面、或者多个标记共用同一套定位逻辑时，top/left 的数值会像多米诺骨牌一样连锁偏移——这时候得回头检查容器是否真“相对”，以及有没有哪个父级偷偷触发了层叠上下文。
