CSS中相对位置、绝对位置和固定位置的区别

在CSS中，有相对位置、绝对位置和固定位置这三种不同的定位方式。它们在定位元素的位置上有所不同，让我们依次来介绍一下这三种定位方式。

相对位置

相对位置是相对于元素默认的位置进行定位，使用position: relative来设定。在相对位置中，元素相对于它原本的位置进行定位，使用top、bottom、left、right向上下左右进行偏移。

.relative {
  position: relative;
  top: 20px;
  left: 50px;
}

绝对位置

绝对位置是相对于最近的已定位祖先元素的位置进行定位，使用position: absolute来设定。如果祖先元素没有设置position属性，则相对于文档的body元素定位，使用top、bottom、left、right向上下左右进行偏移。

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

固定位置

固定位置是相对于视窗来定位元素的位置，使用position: fixed来设定。在固定定位中，元素的位置不随屏幕滚动而改变，使用top、bottom、left、right向上下左右进行偏移。

.fixed {
  position: fixed;
  bottom: 10px;
  right: 50px;
}

总结

• 相对位置是相对于元素的默认位置定位，使用position: relative设定，可以使用top、bottom、left、right进行相对偏移。
• 绝对位置是相对于最近已定位祖先元素的位置定位，使用position: absolute设定，可以使用top、bottom、left、right进行相对偏移。
• 固定位置是相对于视窗定位元素的位置，使用position: fixed设定，可以使用top、bottom、left、right进行相对偏移。