一、固定定位
固定定位指的是將元素相對於瀏覽器窗口固定位置的一種定位方式。該元素會隨著屏幕的滾動保持位置不變，不會受到文檔流、滾動條的影響。
使用固定定位可以實現懸浮菜單、返回頂部等功能。
.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/zh-tw/n/135483.html
微信掃一掃 
支付寶掃一掃 