在CSS布局中，`position: static;` 是默认值。这意味着元素按照普通文档流进行排列，不会受到 `top`、`bottom`、`left` 或 `right` 属性的影响。简单来说，它就是“安分守己”，各就各位。

📍 Position: relative 📍

而当我们将 `position` 设置为 `relative` 时，事情开始变得有趣了！相对定位让元素可以相对于自身的原始位置进行偏移（通过调整 `top`、`bottom` 等属性）。例如，一个按钮原本在页面中央，设置 `position: relative; left: 20px;` 后，它会向右移动 20 像素，但它的原始空间仍然保留。换句话说，它是“小步挪动”，而不影响周围布局。

💡 总结：

- `static` 守规矩，不动如山；

- `relative` 活泼灵动，小范围调整位置。

合理运用它们，能让网页布局更加灵活高效！✨