最稳妥做法是用 relative 定位的父容器包裹图片和按钮，再给按钮设 absolute 定位；若父容器缺失或被 flex/grid 覆盖，按钮会以 body 为基准偏移到左上角。
图片上叠加按钮，用 absolute + relative 是最稳妥的做法——但直接给图片设 position: absolute 会破坏文档流，导致按钮“找不到爹”，最终定位错乱。
为什么按钮总飘到页面左上角？
这是最常见的错误：只给按钮加 position: absolute，但它的父容器（比如包裹图片和按钮的 <div>）没设 <code>position: relative。浏览器就会一路往上找，直到 ，结果按钮以整个视口为参考系偏移。
- 按钮的定位基准是「最近的已定位祖先元素」，不是它视觉上的“爸爸”
- 图片本身
<img>默认position: static，不能当定位上下文 - 哪怕按钮和图片在 HTML 里是兄弟关系，也必须用一个共同父容器来“锚定”
正确父子结构怎么写？
核心就一句话：用一个 <div class="img-container"> 同时包住图片和按钮，并给这个容器设 <code>position: relative。
- 这个容器不一定要有宽高，但必须存在且不设
overflow: hidden（否则可能裁掉按钮） - 图片保持默认流式布局，不用动
position - 按钮设
position: absolute，再用top/right/bottom/left相对于容器定位
<div class="img-container"> @@##@@ <button class="overlay-btn">点击</button> </div>
.img-container {
position: relative;
display: inline-block; /* 防止容器撑满整行 */
}
.overlay-btn {
position: absolute;
top: 10px;
right: 10px;
}
按钮贴图右下角但总偏移不准？
常见原因是没考虑图片的实际渲染尺寸或父容器内边距。绝对定位的 top/right 是从容器盒模型的 border box 起算，不是图片边缘。
- 如果容器有
padding，按钮离图片边缘的距离 =padding+top/right值 - 图片设了
width/height但没设display: block，底部可能留白（<img src="logo.png" alt="logo">默认 inline，有基线间隙） - 想让按钮紧贴图片右下角，推荐用
bottom: 0; right: 0;，比top/left更可靠
移动端图片缩放后按钮位置错乱？
纯 CSS 绝对定位在响应式场景下容易失效，因为 top: 10px 在小屏上可能超出图片范围。这时别硬调像素值。
- 优先用百分比：比如
top: 80%; right: 5%，让按钮随图片缩放自适应 - 更稳的方式是用
transform配合top: 0; right: 0;，例如：transform: translate(100%, -100%)把按钮右上角锚定在容器右上角 - 避免在
<img>上直接用object-fit: cover同时又依赖其原始尺寸定位——它会裁剪，但定位坐标还是按容器盒计算
真正难的不是写几行 CSS，而是每次改完都要检查：那个 position: relative 的容器，是否真的包裹了所有需要相对定位的子元素，且没被其他样式（比如 flex 或 grid）悄悄覆盖掉定位上下文。
