CSS 相对定位、绝对定位和固定定位详解

position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

 
1. 相对定位简介

相对定位是一种将元素相对于其原始位置进行微调的技术。相对定位不会改变元素在文档流中的位置，而是通过修改元素的位置属性来实现定位效果。

1.1  适用场景

相对定位常用于微调元素的位置，实现一些简单的布局效果。它可以与其他定位技术结合使用，如绝对定位和固定定位。

1.2 使用方法

在CSS中使用相对定位，只需要设置元素的position属性为relative，然后可以通过调整top、right、bottom和left属性来微调元素的位置。

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

1.3 注意事项

相对定位只是相对于元素原始位置进行定位，不会脱离文档流。相对定位的元素仍会占据原来的空间，对其他元素的布局影响较小。绝对定位：精准控制元素位置

2. 绝对定位简介

绝对定位是一种将元素相对于其最近的已定位的祖先元素进行定位的技术。如果没有已定位的祖先元素，则相对于文档的最初坐标进行定位。

2.1.  适用场景

绝对定位常用于创建复杂的布局效果和精确控制元素的位置。它可以脱离文档流，不会对其他元素的布局产生影响。

2.2.  使用方法

在CSS中使用绝对定位，需要设置元素的position属性为absolute，然后可以通过调整top、right、bottom和left属性来精准控制元素的位置。

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.3. 注意事项

绝对定位会脱离文档流，不会对其他元素的布局产生影响。
绝对定位的元素不会占据原来的空间，可能会导致其他元素重叠。
固定定位：始终保持在指定位置

3 . 固定定位

固定定位是一种将元素相对于视口进行定位的技术。固定定位的元素会始终保持在指定的位置，无论用户如何滚动页面。

3.1.  适用场景

固定定位常用于创建固定在页面某个位置的导航栏、工具栏或广告条等元素。

3.2. 使用方法

在CSS中使用固定定位，需要设置元素的position属性为fixed，然后可以通过调整top、right、bottom和left属性来锁定元素的位置。

.element {
  position: fixed;
  top: 10px;
  right: 10px;
}

3.4.  注意事项

固定定位的元素会脱离文档流，不会对其他元素的布局产生影响。固定定位的元素会始终保持在指定的位置，不随页面滚动而改变。

结论：相对定位、绝对定位和固定定位是前端开发中常用的定位技术。相对定位适用于微调元素位置，而绝对定位和固定定位则适用于创建更复杂的布局效果和固定元素位置。熟练掌握这三种定位技术将使我们在前端开发中更加灵活和自如。