父元素设置 position: relative 为子元素 absolute 定位提供参考系，子元素需设 position: absolute 并配合 top/left/right/bottom 才能相对于父元素精确定位；若子元素使用 position: relative，则仅相对于自身原位置偏移，不脱离文档流，原有空间仍保留。
在 css 中，使用 relative 定位调整子元素位置时，需要明确：relative 本身是相对于元素自身原本位置进行偏移的。但要注意，子元素不能直接通过父元素的 relative 定位来控制自己的位置，除非子元素自身设置为 absolute 或其他定位方式。
1. 父元素设置 position: relative
父元素设置 position: relative 的主要作用是为子元素的绝对定位（absolute）创建一个参考容器。它本身不会移动父元素的位置，但可以作为子元素定位的基准点。
示例：
.parent { position: relative; width: 300px; height: 200px; background: #f0f0f0; }
2. 子元素使用 absolute + 偏移调整位置
子元素设置 position: absolute 后，会相对于最近的已定位祖先元素（即设置了 relative、absolute 或 fixed 的祖先）进行定位。
示例：
.child { position: absolute; top: 20px; left: 30px; background: #ffcc00; }
此时 .child 会从 .parent 的左上角开始，向右偏移 30px，向下偏移 20px。
立即学习“前端免费学习笔记（深入）”；
3. 如果子元素也设为 relative
如果子元素只设置 position: relative，那么它的偏移是相对于自己原来的位置，不影响文档流中其他元素。
示例：
.child { position: relative; top: 10px; left: 15px; }
这会让子元素视觉上向下移动 10px，向右移动 15px，但原来的空间仍被保留，就像“影子还在”。
关键点总结
- 父元素设 position: relative 是为了给子元素 absolute 定位提供参照
- 子元素用 absolute + top/left/right/bottom 才能精确定位在父元素内
- 子元素用 relative 只能相对自己原位置微调，不脱离文档流
- 仅靠父元素 relative 无法直接“拉动”子元素位置
基本上就这些。定位的关键是搞清参考系：relative 对自己，absolute 对最近的已定位祖先。