绝对定位VS相对定位 postion:absolute relative

|--------------|---------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|
| 对比维度 | relative（相对定位） | absolute（绝对定位） |
| 参考点（往哪移） | 参照物是自己原本在文档流中的位置（即它没移动前本该在的地方）。 | 参照物是最近的那个 position 值不为 static（默认值）的祖先元素 。如果往上找都找不到，则相对于浏览器视口（body）。 |
| 是否脱离文档流 | 不脱离。它原来的物理空间（坑位）被牢牢霸占着，周围元素无法挤占。 | 完全脱离 。它原来的坑位立刻消失，周围元素会无视它，直接补位上来（这会导致父元素高度塌陷）。 |
| 对兄弟元素影响 | 移动它（top/left），不会影响周围元素的位置（周围元素不动，它盖在别人上面）。 | 移动它，会影响周围元素（因为坑位没了，周围元素重新排列）。 |
| 典型使用场景 | 1. 微调元素位置（比如图标上移 2px）。 2. 作为 absolute 子元素的"锚点" （父级设 relative，子级设 absolute）。 | 1. 弹窗、下拉菜单、悬浮按钮。 2. 在父容器内进行自由拖拽定位。 |
[绝对定位VS相对定位]

**场景：**假设 HTML 中有三个兄弟盒子（A、B、C），都是纵向排列。

场景 A（relative） ：给 B 设置 position: relative; top: 20px;。
- B 往下移动了 20px（视觉上压住了 C）。
- 但 B 原来的空白坑位依然保留，所以 C 不会往上移动，依然被堵在 B 的原始位置下方。结果就是 B 和 C 重叠了。
场景 B（absolute） ：给 B 设置 position: absolute; top: 20px;。
- B 彻底消失了（脱离文档流）。
- 原来的坑位没了，C 会立刻往上窜，填补 B 的位置。
- 如果父容器只有 A、B、C 三个子元素，父容器的高度会瞬间失去 B 的支撑，变为 0 这就是高度塌陷！（浮动和绝对定位都会引发塌陷）。

使用注意：

"子绝父相"的原理 ：我们通常给父元素加 position: relative;（且不设置偏移量 top/left），目的不是为了移动父元素 ，而是单纯地让父元素成为一个"定位锚点" ，让子元素的 absolute 局限在父盒子内部活动。

例子:

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>

</style>
</head>

<body>
<!-- 父元素设 relative，作为约束盒子 -->
<div style="position: relative; width: 300px; height: 200px; background: #eee;">
  <!-- 子元素设 absolute，相对于父元素的左上角定位 -->
  <div style="position: absolute; right: 10px; bottom: 10px; width: 50px; height: 50px; background: red;">
    我在右下角
  </div>
</div>
</body>

</html>