position: relative 偏移不脱离文档流，元素仍在原位置占位；偏移量作用于自身原始位置，父容器无需定位；z-index 有效但会创建层叠上下文；适合±20px内微调，推荐配合 transform 使用以提升性能。
position: relative 偏移不会脱离文档流
用 position: relative 做偏移，最核心的一点是：元素仍在原来的位置“占位”，只是视觉上挪动了。这点和 position: absolute 有本质区别——后者会完全脱离文档流，影响后续元素布局。
常见错误是以为加了 top 或 left 就能“推开”其他元素，结果发现兄弟元素位置没变，只看到目标元素自己“浮”起来了。这就是因为它没走开，只是画布上重绘了一次。
- 偏移量（
top/right/bottom/left）作用于元素自身原始位置，不是相对于父容器边界 - 父容器无需设
position（不像absolute那样依赖最近定位祖先） - z-index 在 relative 元素上有效，可用于微调层叠顺序
relative 偏移常用于按钮/图标微调场景
比如表单中一个带图标的输入框，图标需要紧贴输入框右侧边缘，但又不想用 flex 或绝对定位破坏结构流。这时给图标加 position: relative，再用 right: -8px 往左“挤”一点，既保持 HTML 顺序清晰，又避免额外 wrapper。
这类场景的关键是“小幅度、可预测、不破坏流”。一旦偏移量超过几十像素，或需要响应式动态调整，就该考虑更健壮的方案（如 transform: translate()）。
立即学习“前端免费学习笔记（深入）”；
- 适合 ±20px 内的视觉对齐，例如修正字体 baseline、图标居中、下划线微调
- 不要用它来实现“悬浮气泡”或“弹出菜单”，那属于脱离流的交互需求
- 注意和
margin的区别：relative 偏移不影响 margin collapse，而负 margin 可能触发折叠
relative + transform 组合更安全
单纯用 top/left 偏移会触发浏览器重排（reflow），尤其在动画或高频操作中性能较差；而 transform: translate() 只触发重绘（repaint），且能启用 GPU 加速。
所以现代写法更推荐：先设 position: relative 保留下文定位上下文（比如为子元素 absolute 提供参考），再用 transform 实现偏移主体。
button {
position: relative;
transform: translateX(12px) translateY(-2px);
}
-
transform不影响文档流，也不影响top/left计算逻辑 - relative 本身不偏移，仅提供定位上下文；真正移动靠 transform，更可控
- 若需支持 IE9，
transform要加-ms-前缀，但relative无兼容问题
容易被忽略的 stacking context 陷阱
当给一个 relative 元素设置 z-index（哪怕只是 z-index: 0），它就会创建新的层叠上下文（stacking context）。这会导致它的子元素的 z-index 只在这个局部上下文中生效，可能意外遮挡本该在顶层的弹窗或 tooltip。
这不是 bug，是规范行为，但极易被忽视——尤其在封装组件时，某个内部图标用了 relative + z-index，结果整个组件浮层被压在底部。
- 除非明确需要控制层叠顺序，否则别随便加
z-index - 检查 DOM 结构中是否有“多余”的 relative + z-index 组合，它们可能是层叠异常的源头
- 用浏览器 devtools 的 Layers 面板（Chrome）或 3D View（Firefox）可快速识别 stacking context 层级
