相对和绝对 CSS 有什么区别

在 CSS 中，定位是指将元素放置在文档中的某个位置。其中，绝对定位和相对定位是两种常见的方式。

绝对定位

绝对定位是相对于最近的已定位（父元素或祖先元素）元素的位置来计算元素的位置。如果不存在已定位的祖先元素，则是相对于 body 元素的位置来计算元素的位置。

• 代码片段

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

相对定位

相对定位是相对于元素本身在文档流中的位置来计算元素的位置。相对定位不会使元素脱离文档流，所以其他元素的定位和布局不会受到影响。

• 代码片段

.position-relative {
  position: relative;
}

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

区别

相对定位和绝对定位有以下区别：

1. 参照物不同：相对定位是相对于元素本身的位置来计算元素的位置；绝对定位则是相对于最近的已定位元素的位置来计算元素的位置。
2. 影响范围不同：相对定位不会影响其他元素的定位和布局；而绝对定位会影响其他元素的定位和布局。
3. 使用场景不同：相对定位用于微调元素的位置，而绝对定位可以用于创建漂浮效果、创建悬挂菜单、创建定位画廊等。

总之，在选择相对定位和绝对定位时，要根据实际情况选择合适的方式。