容器必须设为 position: relative 以建立定位上下文，图片自然撑开容器高度，按钮用 position: absolute + bottom/right 精准定位右下角，避免图片脱离文档流或容器无高度导致定位失效。
容器必须设为 position: relative
这是整个布局的前提。图片和按钮都放在同一个父容器里，如果容器没设 position: relative，那按钮用 position: absolute 会相对于最近的定位祖先（比如 body）偏移，而不是贴着这张图右下角——结果就是按钮飘走，完全不在预期位置。
常见错误是只给按钮加 position: absolute，却忘了给父容器加 position: relative。哪怕容器只是个 <div>，也得显式声明。
<ul>
<li>父容器必须有明确宽度/高度（比如图片撑开，或设 <code>display: inline-block）
float 或 flex 替代 relative——它们不构成“定位上下文”overflow: hidden），要确认是否裁剪了按钮按钮用 position: absolute + bottom/right
按钮放进去后，设 position: absolute，再用 bottom: 8px 和 right: 8px 往右下角拉。数值越小越靠近边缘，负值会超出图片边界。
注意：这里 bottom 和 right 是相对于容器内边距（padding）内侧计算的，不是图片边缘。所以只要容器尺寸和图片一致，效果就准。
- 避免用
top/left算高度/宽度去反推——图片尺寸可能变化，不健壮 - 如果按钮需要响应式缩放，
bottom/right建议用rem或em，别全用px - 按钮默认是行内元素，加
display: block或inline-block更容易控制尺寸
图片别设 position: absolute
有人为了“精确定位图片”给 <img> 加 position: absolute，这反而破坏布局流。一旦图片脱离文档流，父容器可能高度塌陷（变成 0），导致按钮定位失效——它还在找“容器的右下角”，但容器已经没高度了。
正确做法是让图片自然撑开父容器：用 display: block 防止底部留白，必要时设 max-width: 100% 保响应式。
- 如果图片是背景图，那就换思路：用
background-image+padding撑容器，按钮仍绝对定位在容器内 - 不要给图片设
z-index，除非真要盖住按钮——通常按钮应置于顶层 - 检查浏览器 DevTools 的“Computed”面板，确认父容器实际 height 不为 0
移动端点击区域太小怎么办？
按钮放在右下角，尤其在手机上，手指容易点歪。光靠视觉位置不够，得扩大可点击范围。
最稳妥的做法是保持按钮视觉尺寸不变，但用 padding 或伪元素扩展热区，同时用 pointer-events: none 配合子元素控制交互边界。
- 直接增大
padding可能撑开按钮、影响布局，建议用::after伪元素覆盖更大区域 - 确保
touch-action: manipulation在按钮上，减少 iOS 300ms 延迟 - 如果按钮带图标，图标本身用
font-size控制，外层容器用padding提供足够触控余量
bottom 数值更管用。
