相对定位不脱离文档流，元素仍占原位置，通过top、left等属性相对于自身偏移，常用于微调或作为绝对定位的参考父级；2. 绝对定位脱离文档流，不占空间，相对于最近的已定位祖先元素进行定位，适用于弹窗、悬浮按钮等需要精确控制的场景；3. 两者核心区别在于是否脱离文档流、定位基准不同及空间占用情况，正确理解有助于精准布局控制。
相对定位（relative）和绝对定位（absolute）是CSS中常用的两种定位方式，它们都通过 position 属性设置，但行为上有明显区别。
1. 相对定位（position: relative）
元素设置为 relative 时，它仍然占据原来在文档流中的位置。你可以通过 top、right、bottom、left 属性相对于自身原本的位置进行偏移。
- 不脱离文档流
- 偏移后原位置仍被保留
- 常用于微调元素位置或作为绝对定位的参考父容器
示例：
这个元素向右移动20px，向下移动10px，但原来的空间还在。
2. 绝对定位（position: absolute）
元素设置为 absolute 后，会脱离正常的文档流，不再占据空间。它的定位是相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先），如果没有这样的祖先，则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
- 脱离文档流，不影响其他元素布局
- 定位参考点是最近的已定位祖先元素
- 常用于弹窗、悬浮按钮、精确布局控制等场景
示例：
这个元素相对于外层div定位到左上角。
关键区别总结
- 文档流影响： relative 不脱离，absolute 脱离
- 定位基准： relative 相对自己原位置，absolute 相对于最近的已定位祖先
- 空间占用： relative 仍占位，absolute 不占位
- 使用场景： relative 多用于调整位置或设为父容器，absolute 多用于精确定位子元素
