relative定位元素原地占位并自身偏移，不影响其他元素布局；其偏移后仍参与父容器高度计算，且offsetTop等属性反映偏移量，而transform则不改变盒模型坐标。
是的，relative 定位只偏移自身，不影响其他元素的布局。这是它和 absolute、fixed 最关键的区别之一。
relative 的本质：原地占位 + 自身挪动
元素设置 position: relative 后，仍然保留在标准文档流中，占据原来的空间位置（即“占位不变”），只是通过 top、right、bottom、left 属性在视觉上相对于自己原本的位置进行偏移。
其他元素完全感知不到它的移动——布局表现和它没加偏移时一模一样。
常见操作与效果示例
- 给一个 加
position: relative; top: 20px; left: 10px;→ 它向下、向右挪了，但上面的元素不会下移，下面的元素也不会上提，周围空白区域仍是它“原本该在”的位置- 多个 relative 元素叠在一起？只要没设
z-index，它们按 HTML 顺序层叠；偏移不会导致重排或挤压邻近块级元素- 父容器高度由 relative 子元素撑开 —— 即使它被
top往上拉，只要没用transform或负 margin 等影响盒模型的方式，其原始高度仍参与父容器计算注意别和 transform 混淆
transform: translate()也能实现视觉偏移，且同样不触发重排、不影响布局，但它和relative + top/left的行为有细微差别：立即学习“前端免费学习笔记（深入）”；
- transform 是渲染层偏移，不影响任何盒模型属性（如
getBoundingClientRect()返回的位置仍是原始位置） - relative 偏移后的元素，其
offsetTop/offsetLeft等会反映偏移量，更利于 JS 动态计算 - 两者都不影响其他元素布局，但选哪个取决于是否需要 JS 获取偏移后坐标、是否涉及动画性能等
什么情况下 relative 会“看起来影响布局”？
实际中偶尔会觉得 relative “挤到别人了”，通常是因为：
- 设置了
z-index导致层叠关系变化，遮挡了别的内容（视觉干扰，非布局干扰） - 偏移后和相邻元素发生重叠，而相邻元素本身是
position: absolute或float，造成错觉 - 用了
margin或padding配合 relative，误把 margin 影响当成了 relative 的影响
- 多个 relative 元素叠在一起？只要没设
