HTML图像位置由CSS定位机制控制，而非标签自身；默认为inline元素受文档流影响，需用display:block或vertical-align调整；绝对定位需配合已定位祖先元素，现代布局优先使用flex/grid。
HTML 中图像的位置不是由 position: absolute，先搞清“谁在控制谁”这个前提。
图像默认位置由文档流和 display 决定
inline 元素，会像文字一样随行内内容排列，受父容器宽度、前后文本、line-height 和 vertical-align 影响。常见现象：图片底下有空白、换行错位、对不齐文字。
- 用
display: block让图片脱离行内流，消除底部空白 - 用
vertical-align: top/middle/bottom调整行内对齐（仅对inline或inline-block有效） - 避免直接给
margin-top治标不治本——先确认它是不是真在你“以为”的流里
想精确放图？先学会父容器的定位上下文
position: absolute 的图不会相对于页面左上角，而是相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。新手常犯错：只给 absolute，却不给父容器加 relative，结果图飞到 body 顶部左角。
- 想让图片相对某个卡片定位？给卡片容器加
position: relative - 父容器没设定位 → 浏览器回溯到
，变成“全页坐标系” -
top/left等偏移值，在无定位父级时才真正以视口为参考
flex 和 grid 已成主流布局方式，别绕开它们学定位
纯靠 position 摆图属于“硬编码”，难响应、难维护。现代页面中，图像位置更多由容器布局能力决定：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+justify-content/align-items居中一张图，比absolute+transform更简洁可靠 - 用
display: grid划区域，把grid-area，位置由网格模板定义 - 注意：
flex容器里的margin: auto实现居中——这是 flex 特性，不是定位属性
真正卡住新手的，往往不是“怎么写 position”，而是没意识到图像位置是父子协作的结果；一个 relative 少写了，整个绝对定位就失效。先练熟文档流行为和父容器作用，再碰 z-index 和层叠上下文这类更隐蔽的问题。
