relative定位不脱离文档流，始终保留原始占位，不影响兄弟元素布局和父容器高度计算；top/left等偏移仅改变视觉位置，z-index只影响层叠顺序。
relative 定位不脱离文档流，会保留原始占位
不会影响其他元素的布局位置——这是 position: relative 最关键的特性。元素仍占据它在正常文档流中原本该占的空间，只是自身视觉位置发生了偏移。
也就是说，top、left 等偏移值只改变渲染位置，不影响父容器高度计算，也不挤压或推开兄弟元素。
- 兄弟元素照常按原始顺序排布，无视你加了
top: 20px - 父容器高度仍由该元素“未偏移前”的尺寸决定
- 若用
z-index提升层级，仅影响层叠顺序，不改变占位逻辑
对比 absolute 定位：占位行为截然不同
position: absolute 会完全脱离文档流，原始位置“消失”，兄弟元素立刻填补空缺；而 relative 始终“站岗”不动，哪怕它自己已经视觉上飘到别处去了。
常见误判场景：给一个 div 加了 position: relative; top: -10px 后，发现下方元素没往上顶——这正是它还在占位的证明。
立即学习“前端免费学习笔记（深入）”；
- 想让下方元素“跟上来”，得改用
absolute或直接用margin-top: -10px -
relative+transform: translateY(-10px)也保留占位，但触发 GPU 加速，适合动画 - 注意：
transform不影响布局，top/left也不影响——二者在此点一致
实际调试中怎么确认是否占位？
打开浏览器开发者工具，选中元素，看盒模型高亮区域是否覆盖原始位置（即使它视觉上已偏移）。再临时删掉 position: relative，观察周围元素是否跳动——如果不跳，说明它一直稳稳占着位。
- 检查 computed 样式中的
position和top/right/bottom/left是否生效 - 在 Elements 面板中 hover 元素，看高亮框是否“卡在原地”
- 对父容器加
outline: 1px solid red，能更清楚看到内容撑开的范围是否包含该元素
.box {
position: relative;
top: 15px;
left: 20px;
background: #eee;
}
.sibling {
background: #ddd;
}
上面的 .sibling 元素不会因为 .box 的 top 和 left 而改变自己的位置或父容器高度。
真正容易被忽略的是：当多个 relative 元素叠加偏移时，它们的占位区域可能重叠，但布局引擎仍按原始顺序计算空间——这不是 bug，是规范行为。
