结论：position: relative 本身不创建“坐标系”，但使元素成为 absolute 子元素的定位上下文（containing block），即提供相对定位基准；它不脱离文档流、不影响布局， yet 满足“已定位祖先”条件，是约束 absolute 子元素最安全的选择。
直接说结论：position: relative 本身不创建“坐标系”，但它会让元素成为 position: absolute 子元素的定位上下文（containing block），这才是你真正需要的“相对坐标系”。别给没用的父容器乱加 relative，否则可能引发意料外的层叠或尺寸问题。
为什么父元素必须设 position: relative 才能约束 absolute 子元素？
浏览器查找 absolute 元素的定位基准时，会向上遍历祖先，直到找到第一个 position 值为 relative、absolute、fixed 或 sticky 的元素。如果全都是 static（默认值），就退回到视口（viewport）定位——这往往不是你想要的。
-
relative是最安全的选择：它不脱离文档流，不影响布局，又满足“已定位祖先”条件 - 别用
position: absolute做父容器来当参考点——它会脱离文档流，可能导致父容器高度塌陷 -
position: fixed会让子元素相对于视口定位，和父容器物理位置脱钩，基本不用在这种场景
top/left 等偏移值到底以谁为原点？
以父元素的 边框盒（border box）左上角 为原点，不是 padding box，也不是 content box。也就是说，top: 0; left: 0 会让子元素紧贴父元素的 border 内侧边缘。
- 父元素若有
border: 2px solid #000，那么top: 0的子元素顶部会和 border 内边缘对齐 - 父元素若设置了
padding: 10px，top: 0; left: 0的子元素不会被 padding 推开——它直接压在 padding 区域里 - 如需留白，要么在子元素上加
margin，要么在父元素用padding并配合子元素的top/left微调
常见踩坑：加了 relative 却没生效？
表面加了 position: relative，但子元素还是飞到页面角落，大概率是这几个原因：
- 父元素没有设置明确的
width或height，导致内部absolute子元素按内容宽高撑开，视觉上像“溢出” - 父元素本身是 inline 元素（比如
<span></span>），relative对 inline 元素的top/bottom行为受限，且无法作为absolute的 containing block（除非显式设display: block或inline-block） - CSS 优先级冲突：其他样式（比如框架类名、全局重置）覆盖了你的
position: relative，用浏览器开发者工具检查 computed 样式里的position值是否真为relative - 父元素被
transform、filter或will-change触发了新的层叠上下文，间接影响了absolute定位行为（虽不常见，但调试时值得排查）
最关键的细节往往藏在父元素是否真正“可被识别为定位上下文”——不是写了 relative 就万事大吉，得看它是否被浏览器实际采纳为 containing block。打开 devtools，选中父元素，确认 Styles 面板里 position: relative 没被划掉，且 Computed 里 position 确实是 relative，再往下看子元素的 offset parent 是不是它自己。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
