相对定位与绝对定位的本质区别

2023-12-04 23:01:07

相对定位与绝对定位的定义

相对定位（relative） ：相对定位会相对于元素原本的正常位置进行偏移。当元素处于相对定位时，它仍然占据其原本在文档流中的位置，只是在视觉上会根据偏移量移动。

绝对定位（absolute） ：绝对定位会将元素从文档流中移除，并相对于其最近的已定位祖先元素（如果不存在，则相对于文档）进行定位。绝对定位的元素不再占据其在文档流中的位置，也不会影响其他元素的位置。

相对定位与绝对定位的特点

特征	相对定位	绝对定位
偏移相对于	原本的位置	最近的已定位祖先元素或文档
占据空间	是	否
影响其他元素	是	否

相对定位与绝对定位的差异

偏移基准不同 ：相对定位相对于元素原本的位置进行偏移，而绝对定位相对于最近的已定位祖先元素或文档进行偏移。
空间占用不同 ：相对定位的元素仍然占据其原本在文档流中的位置，而绝对定位的元素不再占据其在文档流中的位置。
对其他元素的影响不同 ：相对定位的元素会影响其他元素的位置，而绝对定位的元素不会影响其他元素的位置。

实例展示

以下代码展示了相对定位和绝对定位的实际应用：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: #ccc;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }

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

    .box-absolute {
      position: absolute;
      left: 50px;
      top: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box-relative"></div>
    <div class="box box-absolute"></div>
  </div>
</body>
</html>