relative定位图像的位置由其在文档流中的原始位置决定，通过top、right、bottom、left相对于该原始位置偏移，且仍占据原空间，不脱离文档流。
relative定位图像的位置由什么决定
图像设为 position: relative 后，它的位置基准仍是文档流中的原始位置，只是可以通过 top、right、bottom、left 偏移——这些值不是相对于父容器，而是相对于它「本来该在的地方」。也就是说，哪怕你加了 top: 20px，它仍占据原来的空间，不影响其他元素布局。
为什么给图片加relative后没看到移动效果
常见原因是漏写了偏移属性，或者写了但值为 0（比如 top: 0），或者单位写错（如 top: 20 缺少 px 或 rem）。另外，如果父容器有 overflow: hidden，且偏移后图像超出范围，也可能被裁剪而“看不见”。
-
relative必须配合至少一个方向的偏移属性（top/left等）才生效 - 偏移值支持
px、%、em、rem，但不支持无单位数字 - 若图像本身是行内元素（默认），
top对齐的是行高基线，视觉上可能不如块级表现直观；建议加display: block
relative图像随内容移动的本质原因
因为 relative 不脱离文档流。图像仍在 HTML 顺序中占位，周围段落、标题、列表等按原顺序渲染，它只是“自己挪了一小步”。所以当上面插入一段文字，或父容器高度变化，它的原始位置跟着下移，偏移量也同步下移——看起来就是“随内容一起动”。
- 这是相对定位和
absolute的关键区别：absolute脱离流，只认最近的非static父容器 - 如果希望图像“固定在某个区域右上角”，别用
relative，改用absolute+ 父容器position: relative - 响应式场景下，
relative偏移值用%更安全，但要注意百分比是相对于自身宽度/高度（top/bottom是相对于高度，left/right是相对于宽度）
简单可复用的relative图像偏移写法
下面这段代码让图像在原文位置基础上向下、向右各偏移 12px，同时保持块级行为，避免行内对齐干扰：
立即学习“前端免费学习笔记（深入）”；
@@##@@
如果要微调多个图像，推荐抽成 class：
.shifted-img { position: relative; top: 8px; left: 4px; display: block; }
注意：不要在 relative 元素上依赖 z-index 实现层级覆盖，除非它有明确的堆叠上下文（比如设置了 z-index 且父级不是 auto）——这点常被忽略，导致遮挡失效。
