必须给图片的直接父容器设 position: relative，否则绝对定位图标会相对于 body 定位而飘到页面左上角；top: 0; left: 0 易受盒模型和 object-fit 影响，应配合 transform: translate(-50%, -50%) 精准锚定；响应式下优先用 rem/em 偏移，多图并排时需为父容器设 position: relative 和 z-index: 0 以建立层叠上下文。
父容器没设 position: relative，图标飘到页面顶部去了
绝对定位的元素（比如左上角小图标）会找最近的「已定位祖先」做参考系。如果父级没设 position: relative（或 absolute/fixed），它就一路往上找，最后可能相对于 <body> 定位，结果图标出现在整个页面左上角，而不是图片左上角。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片的直接父容器加
position: relative，哪怕它只是个<div> - 别只给图片本身设
position: relative——图片是替换元素，设了也没用，参考系必须是它的父块级容器 - 如果父容器已有其他定位（如
position: absolute），也能当参考系，但容易引发布局意外，优先用relative
top: 0; left: 0 覆盖不精准，图标被裁掉或留白
图片宽高不确定时，top: 0; left: 0 看似合理，但实际受盒模型、内边距、图片缩放方式影响。尤其当图片用 object-fit: cover 或设置了 max-width，视觉左上角和盒模型左上角可能错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图标容器用
transform: translate(-50%, -50%)配合top: 0; left: 0，让它真正锚定在左上角像素点 - 确保图标自身不带默认外边距或行高干扰，加
margin: 0; line-height: 1; - 如果图标是字体图标（如 Font Awesome），注意
font-size和vertical-align可能导致偏移，统一设vertical-align: top
响应式下图标位置跑偏，特别是图片宽度变小后
固定像素值（如 top: 8px; left: 8px）在小屏下可能让图标压住图片边缘，或离得太远；而百分比（如 left: 5%）又会随父容器缩放，不一定贴合图片内容区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
em或rem做偏移单位，和字体大小联动，比纯px更可控 - 如果图片有固定宽高比（如 16:9），可配合
aspect-ratio+padding-top布局，让父容器尺寸稳定，图标定位更可靠 - 避免对图片设
width: 100%同时又让父容器不定宽——这时父容器宽度由内容撑开，图标定位基准就飘了
多个图片并排时，图标 z-index 失效或重叠错乱
所有图标都用 position: absolute，但没设 z-index，渲染顺序按 HTML 流顺序，后面图片的图标可能盖住前面的；或者父容器没形成新的层叠上下文，图标被其他模块（如导航栏）遮挡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个图片父容器加
position: relative; z-index: 0，主动创建层叠上下文 - 图标本身设
z-index: 1或更高，确保它浮在图片上方，而非被同级元素穿透 - 别在图标上用
z-index: -1——它会沉到父容器背景下面，直接看不见
position: relative，然后花半小时调 top 和 left，其实根本不在一个坐标系里。 
