CSS中绝对定位和相对定位的区别

在谈论绝对定位和相对定位的区别之前，我们需要先了解什么是绝对定位和相对定位。

其实，绝对定位和相对定位都是CSS的定位属性，它们用来控制元素的位置以及排版。具体来讲，绝对定位让元素相对于其最近的已定位的祖先元素（如果没有已定位的祖先元素，则相对于初始包含块）进行定位，而相对定位则是相对于元素本身在文档中的位置进行定位。

/* 绝对定位 */
position: absolute;

/* 相对定位 */
position: relative;

理解定位属性的原理对于掌握绝对定位和相对定位的区别至关重要。

首先，我们需要明确一点的是，所有元素都默认是静态定位（position: static），它们的位置是由文档流控制的。而绝对定位和相对定位则是一种相对于文档流进行定位的方式。

对于绝对定位，当我们设置元素的position为absolute时，该元素会从文档流中移除，并相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（即窗口）进行定位。具体来说，绝对定位会将元素从文档流中移除，所以后面的元素会在视觉上占用之前该元素的空间。

/* 绝对定位 */
.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

对于相对定位，当我们设置元素的position为relative时，该元素依旧保留在文档流中，但是会相对于自身在文档流中的位置进行定位。具体来说，相对定位会在原本的位置上“相对移动”一定的距离。由于该元素仍然留在文档流中，所以后面的元素不会跟着跑到该元素之前的位置。

/* 相对定位 */
.child {
  position: relative;
  top: 50px;
  left: 50px;
}

绝对定位和相对定位虽然都用来控制元素的位置，但是它们的应用场景却截然不同。

绝对定位通常用于需要元素脱离文档流而单独控制位置的情况。比如，我们使用绝对定位实现图片与文字重叠的效果时，就会先将图片设置为绝对定位，再通过top、left等属性指定图片相对于容器进行定位。此时，文字就会自动占用图片原来的位置。

/* 图片与文字重叠 */
.container {
  position: relative;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
}

而相对定位则通常用于微调元素的位置。比如说，我们在实现网页布局时，有时需要微调某个元素的位置，这时候我们可以把该元素设置为相对定位，并通过top、left等属性进行微调。

/* 微调元素位置 */
.button {
  position: relative;
  top: 5px;
  left: 10px;
}

尽管绝对定位和相对定位在一些场景下非常实用，但是它们依然存在一些缺点：

首先，由于绝对定位会将元素从文档流中移除，所以后面的元素会在视觉上占用它原来的位置，从而导致层叠顺序的问题。如果后面的元素在层叠顺序上设置了z-index，则可能会覆盖在前面的元素上。

其次，由于相对定位是相对于元素本身在文档流中的位置进行定位，所以如果元素的尺寸改变了，它的位置也会随之发生变化，这种不确定性会给后期的维护带来一定的困难。

本文从多个方面介绍了绝对定位和相对定位的区别。通过了解它们的工作原理，我们可以更好地掌握它们的应用场景，并在实际的开发中更加灵活地应用它们。

原创文章，作者：HXNC，如若转载，请注明出处：https://www.506064.com/n/139515.html