在 CSS 定位中，relative 不会脱离文档流，并且会保留原来的占位；absolute 则会脱离文档流，同时依赖最近的非 static 祖先元素进行定位。两者在定位参照物、对页面布局的影响，以及对子元素定位上下文的作用上，都存在明显区别。

relative 和 absolute 的关键区别，并不只是“相对定位”和“绝对定位”的字面含义，而主要体现在三点：是否保留原始位置占位、定位参照对象是谁、以及是否会影响子元素的定位上下文。

relative 不脱离文档流，但会保留原始占位

当元素设置了 position: relative 之后，虽然可以通过 top/left 等属性在视觉上移动位置，但它在正常文档流中的原始位置仍然会被保留。可以理解为元素“看起来移动了”，但它原本占据的空间并没有消失，因此周围其他元素通常不会因为它的偏移而重新布局。

• 适合做细微位置调整：例如按钮图标右移 2px、文字下划线下压 1px、tooltip 紧贴文本底部且不撑开父容器高度
• 即使你写了 top: 100px，父级 div 的高度依然按照元素“未移动前”的位置来计算
• 如果没有设置 top/left 等偏移属性，却单独写了 relative，多数情况下就是冗余；同时它还可能无意中成为子级 absolute 元素的定位锚点

absolute 脱离文档流，定位时必须找参照父级

一旦元素使用了 position: absolute，它就会立即脱离文档流，不再占据原有空间，也不会继续影响其他元素的正常排版。不过，absolute 定位并不是相对于自身，而是会向上寻找第一个 position 不为 static 的祖先元素作为定位参考；如果始终找不到这样的祖先元素，通常就会相对于 body 左上角进行定位。

• 常见问题是：button 旁边的弹出菜单本应贴着按钮显示，但父级没有设置定位，结果弹层跑到了浏览器右上角，而不是出现在预期位置
• 某些 CSS 属性，比如 transform、filter，即使父元素仍然是 static，也可能悄悄创建新的 containing block，导致子级 absolute 的定位参照发生变化
• 设置了 absolute 后，通常还需要配合 left、top、right 或 bottom 使用；否则元素虽然已经脱离文档流，但默认位置可能让人误以为它没有变化

想偏移又不想打乱布局？优先考虑 transform: translate()

如果你的需求只是做小范围移动、元素居中，或者实现悬停上浮效果，那么 transform: translate() 往往比 relative+top/left 更简洁，也比 absolute 更容易控制：

• 它不会改变文档流，也通常不会触发重排，同时更适合实现平滑的过渡动画效果
• 与 relative 不同，transform 不会让当前元素天然变成子级 absolute 的定位上下文
• 与 absolute 不同，它不需要额外寻找定位参照父级，使用起来更直接，也更适合做纯视觉位移

学习 CSS 相对定位和绝对定位，真正容易出错的地方并不是定义本身，而是在实际开发时是否想清楚：这个偏移要不要保留原始占位？当前元素的定位参照物到底是谁？子元素会不会因为这次设置而意外获得新的定位上下文？只要这三个问题没有提前确认，position 的使用就很容易出现布局错位或定位异常。