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 的定位上下文。哪怕你本意只是调个按钮，也可能意外影响后代绝对定位的行为。
