按钮飘到左上角是因为父容器未设position: relative，导致定位上下文回溯至body；正确做法是用带position: relative的共同父容器包裹图片和按钮，并确保容器有真实高度。
为什么按钮总飘到页面左上角？
这是最典型的定位失效现象：只给按钮加 position: absolute，但包裹它的父容器没设 position: relative。浏览器会逐级向上查找「最近的非 static 祖先」，最终 fallback 到 ——按钮就钉在视口左上角了。
- 图片本身是
static定位，不能当定位上下文 - 即使按钮和图片在 HTML 里是兄弟节点，也必须用一个共同父容器“锚定”它们
- 用 DevTools 检查按钮的
offsetParent，能立刻确认当前参考容器是谁
怎么写才叫“父相子绝”？
核心就是一句话：用一个 <div class="img-container"> 同时包住 <code><img> 和按钮，并给这个容器设 position: relative。其他都不用动。
- 容器不需要宽高声明，靠图片自然撑开即可（注意
<img>默认有底部留白，加display: block消除） - 按钮设
position: absolute+top/right/bottom/left，数值直接相对于容器内边距内侧计算 - 别给
<img>加position: absolute——它一脱离文档流，容器高度就塌陷为 0，按钮再怎么设bottom: 8px也没地方可落
右下角、左上角这些固定位置怎么算？
优先用 bottom + right 或 top + left，别用 top + width 反推。图片尺寸可能变，反推不健壮。
- 右下角示例：
bottom: 12px; right: 12px; - 左上角示例：
top: 8px; left: 8px; - 想居中覆盖整个图？用
top: 50%; left: 50%; transform: translate(-50%, -50%); - 移动端点击区域太小？保持视觉尺寸不变，用
padding扩展热区，或加::before伪元素撑开可点击范围
响应式场景下按钮位置偏移怎么办？
固定像素（px）在缩放或不同设备上会失准。关键不是换单位，而是换参照系。
- 用
vw/vh或%替代px：比如right: 3vw; bottom: 3vw; - 如果图片是背景图，用
background-size: cover+padding撑容器，按钮仍绝对定位在容器内 - 避免给容器设
overflow: hidden——容易把按钮裁掉，尤其当按钮用了负偏移或大padding - 按钮内部图标精确定位时，按钮自身要设
position: relative，图标用position: absolute再配transform: translateY(-50%)垂直居中
height: 0，按钮就会悬空定位。上线前务必检查容器的 computed height 是否为 0。
