position: relative 元素仍占据原始文档流位置，仅视觉偏移；偏移基准是自身原位置，非父容器；top/left 优先生效，不触发重排；影响后代 absolute 定位上下文。

为什么 position: relative 不会把元素“移出文档流”

使用 position: relative 时，元素仍保留在正常文档流中，占据原始位置空间；偏移（top、left 等）只是视觉上挪动它，不影响其他元素布局。这是它和 absolute 最关键的区别——你调了 top: 20px，父容器高度不会因此变小，兄弟元素也不会上移补位。

top/left 偏移值是相对于哪来的

偏移基准点是元素**自身原本的边界框位置**（即不加 position: relative 时它该在的地方），不是父容器，也不是内容区。比如一个块级元素默认占满父宽、高度由内容撑开，那 top: -10px 就是从它原本顶部向上拉 10px，底部仍按原高度计算。

• top 和 bottom 不能同时生效，浏览器只认 top（除非 top 是 auto）
• left 和 right 同理，优先级：left > right
• 设 top: 5px; left: 5px; 就是往右下偏移，不是“相对中心”或“相对边框”

常见误操作：偏移后遮挡/错位却找不到原因

因为 relative 元素还在文档流里占位，但视觉上已移动，容易造成“看起来重叠，检查盒模型却发现没挨着”的困惑。尤其当多个 relative 元素叠加时，z-index 不显式设置就依赖 HTML 顺序，容易出意料之外的层叠。

• 用浏览器开发者工具的“元素高亮”功能，勾选「显示盒子模型」，能清楚看到原始占位框（虚线）和当前渲染位置（实线）
• 如果想让偏移后的元素不干扰布局，改用 transform: translateY(-10px) 更安全——它不触发重排，且不影响文档流占位
• 避免对 inline 元素滥用 top：它可能表现异常，优先考虑 vertical-align 或包一层 inline-block

简单示例：按钮微调位置而不影响周围

.btn {
  position: relative;
  top: 2px;
  left: -3px;
}

这个按钮会比原来位置下移 2px、左移 3px，但它原本该占的空间还在，旁边文字不会跟着跑。如果你发现按钮“压住”了下方文字，大概率是它父容器没设 overflow: hidden，或者你其实该用 margin 而不是 relative ——偏移不是布局工具，它是精调手段。

立即学习“前端免费学习笔记（深入）”；

真正容易被忽略的是：一旦用了 relative，它就变成子元素 position: absolute 的定位上下文。哪怕你本意只是调个按钮，也可能意外影响后代绝对定位的行为。