position: relative 实现自身偏移时，元素在原占位处视觉偏移而不影响文档流；其父元素设 relative 后成为子 absolute 元素的定位上下文；未写 top/left 则无偏移，仅开通定位权限；transform: translate() 更优但不创建定位上下文。
用 position: relative 实现自身偏移
元素加了 position: relative 后，top、left、bottom、right 就不再影响文档流位置，而是让元素在**原本占位处基础上**做视觉偏移——这是最常用也最安全的“相对自己动”的方式。
关键点：它不改变其他元素的布局，只挪自己，且不影响后续元素排布。
-
top和left为正值时，元素向下、向右移动；负值则向上、向左 - 偏移量可以是
px、%、em等，但百分比是相对于**包含块的高度/宽度**（不是自身），这点容易误判 - 如果父容器没设高度，
top: 20%可能表现异常，建议优先用px或rem
relative 偏移后，子元素 absolute 定位以谁为参考？
加了 position: relative 的父元素，会成为其内部 position: absolute 子元素的**最近定位祖先**。也就是说，子元素的 top/left 是相对于这个父元素的边界计算的，而不是整个页面。
这正是 relative 最常被忽略却最关键的用途：不显眼地“建一个定位上下文”，避免 absolute 子元素飞到 body 顶层去。
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
}
.tooltip {
position: absolute;
top: 100%;
left: 0;
}
上面这段代码中，.tooltip 会紧贴 .container 下方显示，前提是 .container 有 position: relative（哪怕没写 top/left）。
为什么加了 relative 却没看到偏移？
常见原因不是语法错，而是逻辑盲区：
- 忘了写
top、left等偏移属性 ——position: relative本身不触发位移，只是“开通权限” - 写了
top: 0或left: 0，看起来像没动，其实已建立定位上下文（对子absolute很重要） - CSS 优先级被覆盖，比如后面有更具体的规则把
top设回auto或重置了position - 元素是行内元素（如
<span></span>），默认不响应top/left，需先加display: inline-block或block
替代方案：transform: translate() 更轻量
如果偏移只是为了微调位置（比如图标上浮 2px、按钮悬停上移），transform: translate() 比 top/left 更推荐：
- 不触发重排（reflow），只重绘（repaint）或合成（composite），性能更好
- 支持 sub-pixel 渲染，动画更平滑
- 偏移基于自身尺寸：
translate(-50%, -50%)总是居中自身，而top: -50%是按父容器高度算的
.icon {
transform: translateY(-2px);
}
注意：transform 不影响文档流，也不创建新的定位上下文 —— 如果你需要让子元素 absolute 相对它定位，仍得靠 position: relative。
真正要小心的是混用 top/left 和 transform：两者同时存在时，浏览器会叠加效果，容易导致意料外的偏移量。选一个，别叠着用。
