CSS的定位布局入门怎么区分relative和absolute？

CSS定位布局入门：如何清晰区分relative与absolute定位？

在CSS布局的世界里，定位（Positioning）是控制元素在页面中精确位置的重要手段，而relative（相对定位）与absolute（绝对定位）作为两种基础且常用的定位方式，常常让初学者感到困惑，本文将直接给出关键区分点，并深入解析两者的差异与使用场景,助你快速掌握这一布局技巧。

核心区别概览

定位基准点不同：这是两者最本质的区别。relative定位的元素是相对于其原本在文档流中的位置进行偏移；而absolute定位的元素则是相对于最近的已定位（非static）祖先元素（如果没有则相对于视口或包含块）进行定位。
对文档流的影响：使用relative定位时，元素仍占据其在文档流中的原始空间，只是视觉上发生了偏移；而absolute定位的元素会脱离文档流，不再占据任何空间,其他元素会像它不存在一样进行布局。
应用场景差异：relative常用于微调元素位置而不影响整体布局；absolute则多用于创建浮动层、精确控制元素位置或与relative配合实现复杂布局。

深入解析与示例

`relative`定位详解

当你给一个元素设置position: relative;后，可以通过top、right、bottom、left属性来调整其位置，重要的是，这个调整是基于元素原本的位置进行的,且元素原本占据的空间保留不变。

示例：

.box-relative {
  position: relative;
  top: 10px; /* 向下移动10像素 */
  left: 20px; /* 向右移动20像素 */
}

此例中，.box-relative元素会从其原始位置向下偏移10px，向右偏移20px,但其原本在文档流中的位置仍被保留。

`absolute`定位详解

设置position: absolute;的元素将完全脱离文档流，其定位完全依赖于最近的已定位祖先元素，这意味着，如果它的父元素没有设置除static以外的定位方式,它将相对于视口定位。

示例：

<div class="container">
  <div class="box-absolute">绝对定位元素</div>
</div>

.container {
  position: relative; /* 为子元素提供定位基准 */
  height: 200px;
  border: 1px solid #ccc;
}
.box-absolute {
  position: absolute;
  top: 0;
  right: 0;
}

在这个例子中，.box-absolute元素会紧贴.container的右上角，因为它相对于最近的已定位祖先（即.container）进行定位。