一、固定定位
固定定位指的是将元素相对于浏览器窗口固定位置的一种定位方式。该元素会随着屏幕的滚动保持位置不变，不会受到文档流、滚动条的影响。
使用固定定位可以实现悬浮菜单、返回顶部等功能。
.fixed{
position: fixed;
top: 20px;
right: 20px;
}
二、绝对定位
绝对定位是相对于父元素或者根元素进行定位的一种方式。该元素不再参与文档流的排版，而是根据其父元素或根元素进行定位。如果没有父元素，则相对于根元素进行定位。
使用绝对定位可以实现弹窗、轮播图等效果。
.parent{
position: relative;
}
.absolute{
position: absolute;
top: 50px;
left: 50px;
}
三、区别
1、定位方式不同。
固定定位相对于浏览器窗口进行定位，而绝对定位则相对于其父元素或根元素进行定位。
2、是否脱离文档流。
固定定位不脱离文档流，绝对定位脱离文档流。
3、是否随屏幕滚动。
固定定位随屏幕滚动，绝对定位不随屏幕滚动。
四、使用场景
1、固定定位使用场景：
① 悬浮导航：当用户向下滚动页面时，悬浮导航停留在页面顶部。
② 返回顶部：当用户往下滑动时，返回按钮随之出现，当用户点击按钮时返回页面顶部。
2、绝对定位使用场景：
① 弹出框：当用户点击某一个按钮时，弹出框出现在页面中央。
② 轮播图：多张图片在一个固定的区域内循环播放。
五、总结
CSS中的固定定位和绝对定位虽然实现的效果不同，但是目的都是为了更好的控制元素的位置。在实际开发中，需要根据实际场景来选择使用不同的定位方式。
原创文章，作者：UUWX，如若转载，请注明出处：https://www.506064.com/n/135483.html
微信扫一扫 
支付宝扫一扫 