CSS 相对定位 vs 绝对定位

在本文中，我们将介绍 CSS 中的相对定位和绝对定位这两种定位方式，并比较它们之间的区别。CSS 中的定位属性可以帮助我们在网页设计中精确控制元素的位置和布局。

阅读更多：CSS 教程

什么是相对定位？

相对定位是一种相对于元素在正常文档流中的位置进行定位的方式。通过使用相对定位，我们可以通过设置 top、bottom、left、right 属性来移动元素的位置。相对定位移动元素之后，空间仍然会占据原始位置，其他元素仍然被视为存在。相对定位不会导致元素脱离文档流。

以下是一个简单的相对定位示例：

<style>
  .box {
    position: relative;
    left: 50px;
    top: 20px;
    background-color: red;
    width: 200px;
    height: 200px;
  }
</style>
<div class="box"></div>

在这个示例中，我们将 <div> 元素的位置相对于其在正常文档流中的位置左移了 50px，上移了 20px。

什么是绝对定位？

绝对定位是一种相对于其最接近的已定位祖先（如果没有已定位祖先，则相对于初始容器）进行定位的方式。通过使用绝对定位，我们可以通过设置 top、bottom、left、right 属性来精确地指定元素的位置。绝对定位将元素从正常文档流中脱离出来，不会占据原始位置。

以下是一个简单的绝对定位示例：

<style>
  .container {
    position: relative;
    width: 400px;
    height: 400px;
  }
  .box {
    position: absolute;
    left: 50px;
    top: 20px;
    background-color: red;
    width: 200px;
    height: 200px;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

在这个示例中，我们将 <div> 元素相对于其最近的已定位祖先 .container 定位，并将其左移 50px，上移 20px。

相对定位 vs 绝对定位的区别

相对定位和绝对定位是 CSS 中常用的定位方式，它们之间有以下几个区别：

脱离文档流：相对定位不会导致元素脱离文档流，而绝对定位会导致元素脱离文档流；
空间占据：相对定位移动元素后，仍然占据原始位置，而绝对定位不占据原始位置；
相对参照物：相对定位相对于元素在正常文档流中的位置进行定位，绝对定位相对于其最近的已定位祖先进行定位，如果没有已定位祖先，则相对于初始容器进行定位。

具体来说，使用相对定位时，元素的位置会相对于其在文档流中的位置发生移动，但不会影响其他元素的位置。而使用绝对定位时，元素的位置会相对于其最近的已定位祖先进行移动，也可以通过设置 top、bottom、left、right 属性来指定元素的位置。绝对定位会脱离文档流，不会占据原始位置，并且可能会影响其他元素的布局。