relative定位的核心作用是创建新的定位上下文，使元素成为其absolute子元素的定位参照物，且不脱离文档流。
relative 定位的核心作用：创建新的定位上下文
设置 position: relative 本身不移动元素，但会让该元素成为其内部 position: absolute 子元素的定位参照物。这是它最不可替代的实际价值。
没有这个特性，absolute 元素默认会相对于最近的「已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的祖先），若找不到，就回退到 initial containing block（通常是视口）。这意味着你无法精准控制弹层、下拉菜单、tooltip 等组件的定位基准点。
为什么不能只用 absolute？常见错误现象
开发者常误以为直接给子元素设 absolute 就能“贴着父容器右上角”，结果发现它飘到了整个页面右上角——因为父容器没设 position，不具备定位上下文能力。
- 父元素未设
position（或仅是static）→ 子absolute向上冒泡找定位祖先，可能跳过好几层 - 父元素设了
position: absolute→ 虽然也能当参照物，但自身已脱离文档流，可能破坏布局结构 - 父元素设了
position: fixed→ 参照物固定在视口，子元素也会随视口滚动而“悬空”
所以 relative 是唯一既能建立参照关系、又不改变元素原始文档流位置的方案。
立即学习“前端免费学习笔记（深入）”；
relative + absolute 的典型使用场景与参数差异
实际开发中，这类组合几乎出现在所有需要“局部锚定”的 UI 模块里：
- 下拉菜单（
dropdown-menu相对于dropdown-toggle定位） - 表单内图标/清空按钮（
input设relative，.clear-btn设absolute） - 卡片右上角标签（
.card设relative，.badge设absolute）
top/right/bottom/left 在 relative 元素上作用是偏移自身（仍占原空间），而在 absolute 子元素上是相对于父边界的距离。这点混淆会导致定位错位。
.container {
position: relative;
}
.tooltip {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
}
容易被忽略的兼容性与性能细节
relative 本身无兼容性问题（IE6+ 支持），但有两点常被忽视：
- 若父元素设置了
transform（哪怕只是transform: translateZ(0)），它也会触发新的定位上下文，可能意外截断absolute子元素的查找链 - 频繁修改
relative元素的top/left值会触发重排（reflow），不如用transform: translateY()性能友好 - 嵌套多层
relative不会叠加影响，只有最近的已定位祖先生效；但若中间某层用了overflow: hidden，可能裁剪掉溢出的absolute子元素
真正关键的是：只要你想让某个元素成为“局部坐标系原点”，relative 就不是可选项，而是必选项——它不抢位置、不破布局、不改流，却悄悄撑起了整个绝对定位体系的根基。
