absolute定位需父容器设position: relative/absolute/fixed/sticky；否则相对<html>定位；top/left基于最近已定位祖先内边框计算，非视口；须显式设图片宽高并注意z-index与overflow影响。
absolute定位前必须确保父容器有定位上下文
直接给图片加 position: absolute 不会按你写的 top、left 值生效，除非它的某个祖先元素（含自身）设置了 position 为 relative、absolute、fixed 或 sticky。浏览器默认把 absolute 元素相对于最近的「已定位祖先」定位；如果全都没设，就退化到相对于 <html> 根元素——这通常不是你想要的结果。
常见做法是给图片外层加个包裹容器，并设 position: relative：
<div style="position: relative; width: 300px; height: 200px;"> <img src="icon.png" style="position: absolute; top: 10px; left: 20px;"> </div>
- 这个
div不改变布局流，只提供定位参考系 - 不设宽高的话，
relative容器可能塌陷，导致图片“飘”到页面其他位置 - 避免对
<body>直接设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，它会脱离文档流且尺寸不确定——浏览器可能先渲染占位、再加载图片、再重排，造成闪动或偏移。
立即学习“前端免费学习笔记（深入）”；
- 务必显式设置图片宽高，或用
aspect-ratio配合object-fit - 避免依赖图片自然尺寸做定位计算，尤其在响应式场景下，
srcset或懒加载会让实际渲染尺寸延迟确定 - 若需居中，别只靠
top: 50%; left: 50%，记得补transform: translate(-50%, -50%)，否则是以左上角为锚点偏移
z-index 和图层遮挡问题常被忽略
absolute 元素默认生成新层叠上下文，但多个 absolute 图片之间谁盖谁，取决于它们的 z-index 值和 DOM 顺序。没设 z-index 时，后出现的元素会覆盖先出现的——这点在动态插入图片时特别容易出错。
- 只要涉及重叠，就该明确写
z-index，哪怕只是z-index: 1 - 注意：
z-index只对定位元素（position != static）生效，对普通<img>无效 - 如果图片被其他元素遮住，先检查父容器是否设置了
overflow: hidden或clip-path，这些会裁剪掉超出区域的 absolute 子元素
最麻烦的情况是定位参考容器本身也在滚动或 transform 中，这时 top/left 的行为可能和直觉不符，得结合 will-change: transform 或临时改用 fixed 来调试。
