CSS中的固定定位和绝对定位有什么区别？

一、固定定位

固定定位指的是将元素相对于浏览器窗口固定位置的一种定位方式。该元素会随着屏幕的滚动保持位置不变，不会受到文档流、滚动条的影响。

使用固定定位可以实现悬浮菜单、返回顶部等功能。

.fixed{
    position: fixed;
    top: 20px;
    right: 20px;
}

二、绝对定位

绝对定位是相对于父元素或者根元素进行定位的一种方式。该元素不再参与文档流的排版，而是根据其父元素或根元素进行定位。如果没有父元素，则相对于根元素进行定位。

使用绝对定位可以实现弹窗、轮播图等效果。

.parent{
    position: relative;
}
.absolute{
    position: absolute;
    top: 50px;
    left: 50px;
}

三、区别

1、定位方式不同。

固定定位相对于浏览器窗口进行定位，而绝对定位则相对于其父元素或根元素进行定位。

2、是否脱离文档流。

固定定位不脱离文档流，绝对定位脱离文档流。

3、是否随屏幕滚动。

固定定位随屏幕滚动，绝对定位不随屏幕滚动。

四、使用场景

1、固定定位使用场景：

① 悬浮导航：当用户向下滚动页面时，悬浮导航停留在页面顶部。

② 返回顶部：当用户往下滑动时，返回按钮随之出现，当用户点击按钮时返回页面顶部。

2、绝对定位使用场景：

① 弹出框：当用户点击某一个按钮时，弹出框出现在页面中央。

② 轮播图：多张图片在一个固定的区域内循环播放。

五、总结

CSS中的固定定位和绝对定位虽然实现的效果不同，但是目的都是为了更好的控制元素的位置。在实际开发中，需要根据实际场景来选择使用不同的定位方式。