vue: position: relative； 和 position: absolute； 的区别与使用

主要区别在于如何定位元素和元素相对于哪个参考点进行定位。

1. position: relative;

• 相对定位：元素保持在文档流中的原始位置，但你可以使用 top、right、bottom 和 left 属性在原始位置的基础上进行偏移。
• 不会影响其他元素的布局：相对于原始位置的偏移不会影响其他元素，它们仍然会把这个元素当作它原始位置上的元素来处理。
• 参考点：元素相对于自身原始位置进行定位。

示例：

.relative-box {
  position: relative;
  top: 20px;
  left: 10px;
}

在这个例子中，.relative-box 元素会在文档流中保留其原本的位置，但它会在原位置基础上向下移动 20px，向右移动 10px。不过，其他元素仍然会认为它在原位置，元素之间的布局不会改变。

2. position: absolute;

• 绝对定位：元素完全脱离文档流，它不再占据原来的位置，其他元素会像它不存在一样排列。
• 参考点：相对于最近的具有定位属性（即 position: relative;, absolute; 或 fixed;）的父元素进行定位。如果没有找到这样的父元素，元素会相对于整个浏览器窗口（即 body）定位。
• 不保留原始位置：一旦设置了 position: absolute;，元素的布局将与文档流无关，因此它不会在页面中为其他元素留出空间。

.absolute-box {
  position: absolute;
  top: 20px;
  left: 10px;
}

在这个例子中，.absolute-box 会相对于最近的具有定位属性的父元素，或整个浏览器窗口移动到距离参考点 20px 下方，10px 右侧的位置。因为它脱离了文档流，其他元素将不再受它的影响，并会像它不存在一样排列。

总结

属性	relative	absolute
定位参考点	相对于元素自身的原始位置	相对于最近的定位父元素或整个页面
是否脱离文档流	否，仍然占据原位置	是，脱离文档流，不再占据原位置
影响其他元素	不会影响其他元素的布局	会影响，因为它不占据位置，其他元素会根据文档流重新排列
应用场景	当你需要在保持文档流的同时进行小范围调整时使用	当你需要精确控制元素的位置，且不希望它影响其他元素布局时使用

何时使用

• relative：用于微调元素位置，但不想让其脱离文档流（例如细微的视觉调整）。
• absolute：用于完全自由地控制元素的位置，且不希望它影响页面的其他布局（例如弹出窗口、悬浮框等）。