17370845950

相对定位（position: relative）的偏移是相对于元素原本在文档流中的位置移动，移动后原占位空间保留，不影响其他元素布局；top/bottom/left/right用于沿坐标轴平移元素，top和left优先，偏移不改变文档流位置，百分比单位按常规逻辑计算。

相对定位（position: relative）的偏移，是相对于元素原本在文档流中的位置进行移动，移动后原占位空间仍保留，不影响其他元素布局。

top / bottom / left / right 的作用机制

当设置 position: relative 后，再使用 top、bottom、left、right，它们不是“拉伸”或“缩放”，而是把元素从原始位置沿指定方向平移：

• top: 20px → 元素向上移动 20px（y 轴负方向）
• bottom: 20px → 元素向下移动 20px（y 轴正方向）
• left: 30px → 元素向右移动 30px（x 轴正方向）
• right: 30px → 元素向左移动 30px（x 轴负方向）

注意：top 和 bottom 同时设置时，top 优先（bottom 被忽略）；left 和 right 同时设置时，left 优先。但实际中一般只设其中一维的两个值（如 top+left），避免冲突。

偏移不会改变文档流位置

这是相对定位最核心的特点：即使元素被 top 或 left 推开，它原来占据的空间依然存在，后续元素照常排布，不会“填补空缺”。

例如：

我是相对定位
我紧挨着上面那个 div

第二个 div 会出现在第一个 div 原本该在的位置下方，而不是被推下来的视觉位置之后。

单位与取值范围

top/left/right/bottom 支持多种单位：

• 像素：top: 10px
• 百分比：left: 5%（相对于包含块的宽度/高度，但注意：相对定位的百分比计算仍基于自身原始位置的参考系，非父容器尺寸）
• em / rem / vh / vw 等也有效
• 可为负值：top: -15px 表示向上反向移动（即向下偏移）

⚠️ 百分比在相对定位中容易误解：它不是相对于父容器宽高，而是按常规长度单位逻辑参与偏移计算，行为和 px 一致，只是数值按比例换算。

与其他定位方式的区别要点

对比绝对定位（position: absolute）：

• 相对定位偏移基准 = 元素自己原来的位置
• 绝对定位偏移基准 = 最近的已定位祖先（或初始包含块）的边界
• 相对定位保留空间，绝对定位脱离文档流、不占位

也就是说，想微调某个元素又不想影响页面整体布局，用 relative + top/left 是安全选择；想彻底脱离流做精确定位，才考虑 absolute 或 fixed。