absolute定位需父容器设position: relative/absolute/fixed/sticky；否则相对定位；top/left基于最近已定位祖先内边框计算，非视口；须显式设图片宽高并注意z-index与overflow影响。
absolute定位前必须确保父容器有定位上下文
直接给图片加 position: absolute 不会按你写的 top、left 值生效，除非它的某个祖先元素（含自身）设置了 position 为 relative、absolute、fixed 或 sticky。浏览器默认把 absolute 元素相对于最近的「已定位祖先」定位；如果全都没设，就退化到相对于 根元素——这通常不是你想要的结果。
常见做法是给图片外层加个包裹容器，并设 position: relative：
@@##@@
- 这个
div不改变布局流，只提供定位参考系 - 不设宽高的话，
relative容器可能塌陷，导致图片“飘”到页面其他位置 - 避免对
直接设position: relative，否则所有absolute元素都会以整个视口为基准，失控风险高
top/left 的值不是“距离页面顶部/左侧”，而是距离定位上下文边界
很多人误以为 top: 20px 是从浏览器窗口顶部往下20px，其实它是从「已定位祖先元素的上边框内侧」开始算起。这个差异常在嵌套较深或有滚动、缩放时暴露出来。
-
top: 0; left: 0表示贴住祖先容器的左上角（不含 padding） - 如果祖先设置了
padding: 10px，而你想让图片真正顶到容器内容区左上角，就得用top: -10px; left: -10px或改用transform: translate(-10px, -10px) - 百分比值（如
left: 50%）是相对于祖先容器的 width/height 计算，不是视口尺寸
图片尺寸未固定时，absolute 定位容易引发布局错乱
如果图片没设 width/height，又用了 absolute，它会脱离文档流且尺寸不确定——浏览器可能先渲染占位、再加载图片、再重排，造成闪动或偏移。
