绝对定位元素必须相对于最近的已定位祖先定位，若父容器未设position: relative，则参考点为body或视口，易导致定位错乱；需显式设置父容器position: relative并配合top/left等偏移值才能精确定位。
绝对定位前必须设父容器为 position: relative
图片加 position: absolute 后不会自动“相对于当前区块”定位，它会一路向上找最近的非 static 祖先——如果父容器没设 position: relative，就可能落到 上，导致图片飞到页面左上角。
实操建议：
- 给包裹图片的
<div>（或其他容器）显式加 <code>position: relative，哪怕它不需要偏移 - 别依赖外层框架或 CSS 重置自动设了这个，手动写最稳
- 用浏览器开发者工具检查该容器的
computed style中offsetParent是谁，能快速验证参考点是否正确 - 图片看起来“消失”了：其实是被后续内容盖住，或被拉到视口外（比如
top: -100px） - 设了
top: 0却没贴顶：父容器没设position: relative，参考点错了 - 想右对齐却用
left: 200px算宽度：换成right: 20px更可靠，响应式下也不崩 - 移除图片上的
float属性（绝对定位下它已无效，还可能触发怪异的 BFC 行为） - 避免在
<img>标签前后加空格或换行——HTML 中的空白符在 inline 元素间会产生间隙，虽然绝对定位后不占空间，但调试时容易混淆 - 如需控制图片尺寸，优先用
width/height或max-width: 100%，别靠transform: scale()微调位置，那不是定位，是视觉欺骗 - 用百分比：比如
top: 10%; right: 5%，前提是父容器高度明确（否则百分比 top/bottom 无效） - 结合
transform做微调：例如居中图标top: 50%; left: 50%; transform: translate(-50%, -50%) - 真要响应式精准定位，考虑改用
display: flex或display: grid，它们对容器内定位更自然，也更易维护
top/left 等偏移值不写就等于没定位
position: absolute 只是把图片从文档流拎出来，本身不改变位置；真正让它动的是 top、right、bottom、left 中至少一个值。只写 position: absolute 不设偏移，图片视觉上“还在原地”，但已脱离文档流——后面内容会顶上来，容易误以为样式失效。
常见错误现象：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
图片自身别留默认行内间隙或浮动干扰
绝对定位虽脱离文档流，但若图片还带着 float、vertical-align 或未清除的换行符，可能影响初始渲染位置或与其他元素的交互逻辑。
实操建议：
移动端慎用固定像素偏移
在手机或平板上，top: 30px; left: 20px 这类写死的值很容易在不同屏幕宽高比下错位，尤其配合缩放或横屏时。
更稳妥的做法：
offsetParent 和实际渲染坐标。
