绝对定位 + 父容器相对定位是最可靠方案：必须给图片外层 div 设 position: relative，关闭图标用 position: absolute + top: 8px; right: 8px; z-index: 1，并设固定宽高、padding 和 cursor，同时避免父容器 overflow: hidden 截断。
绝对定位 + 父容器相对定位是最可靠方案
直接用 position: absolute 给关闭图标定位，但必须确保它的父元素（通常是图片容器）设置了 position: relative，否则图标会相对于整个页面或最近的已定位祖先定位，导致偏移不可控。
- 图片本身不建议设为
position: relative—— 很多浏览器对<img>元素应用定位后会触发重绘异常或尺寸抖动 - 正确做法是包一层
<div class="image-wrapper">，给这个 div 设 <code>position: relative - 关闭图标用
<button class="close-btn"></button>或<span class="close-btn"></span>，设position: absolute并配合top/right等偏移 - 必须加
z-index: 1（或更高），否则可能被图片内容遮挡 - 推荐用
top: 8px; right: 8px，而不是top: 0; right: 0—— 防止贴边时被父容器overflow: hidden截断 - 图标本身建议设
width和height（如16px），避免依赖内容撑开，导致定位漂移 - 如果图标是伪元素（
::before），需确保父元素有position: relative且伪元素设content: "" - 避免用
vh/vw直接算偏移 —— 容易因容器 padding 或 margin 失准 - 更稳妥的是用
calc(100% - 24px)配合top和right，前提是父容器高度明确（比如设置了aspect-ratio或固定height） - 若图片使用
object-fit: cover，注意实际渲染区域可能和容器尺寸不一致，此时绝对定位仍以容器为参考，不是图片内容边界 - Safari 对
position: absolute在 flex 容器子项中的行为偶有偏差，加align-self: flex-start可缓解 - 图标元素至少设
padding: 6px，哪怕视觉上只显示一个 ×，点击热区也要足够 - 务必加
cursor: pointer，否则用户看不出可交互 - 移动端需额外加
touch-action: manipulation，防止 iOS Safari 300ms 延迟影响响应感 - 如果用
<button></button>，默认带 focus 样式和键盘可访问性；若用<span></span>，得手动加tabindex="0"和role="button"
右上角悬浮的典型 CSS 写法
要让关闭图标稳稳停在图片右上角内侧 8px 处，关键不是只写 right: 0; top: 0，而要预留安全边距并处理层叠关系：
响应式场景下容易忽略的兼容问题
图片宽高随屏幕缩放时，固定像素的 top/right 值会显得位置“僵硬”，尤其在移动端小屏上可能溢出或压住图片内容：
点击区域太小？别只靠视觉大小
关闭图标常被用户点不中，根本原因不是图标小，而是 padding 和 cursor 没配齐：
实际布局中，最常被跳过的一步是：没检查父容器是否设置了 overflow: hidden。一旦开启，又没给关闭图标留够内边距，图标就会被直接裁掉——这不是定位失效，是视觉被截断。
