CSS的position屬性可以用來設置元素的定位方式,常用的定位方式有相對定位(relative)、絕對定位(absolute)、固定定位(fixed)和粘性定位(sticky)。
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
相對定位(relative)是相對于元素本身原來的位置進行定位,不影響其他元素的位置,如果設置了top、right、bottom或left等屬性,元素會相對于原來的位置進行移動。
絕對定位(absolute)則是相對于近隔離的祖先元素進行定位,在定位過程中會脫離文檔流,如果沒有找到祖先元素,那么就相對于body進行定位。絕對定位的元素不占據空間,所以其他元素的位置可能會被覆蓋。
固定定位(fixed)則是相對于視口進行定位,不隨頁面滾動改變位置,可以用來實現網站的懸浮導航條等效果。
粘性定位(sticky)是相對于元素所處的位置的距離進行定位。當用戶滾動頁面時,元素會按照設定的位置停留。如果需要滿足滾動時的滑動效果,可以在粘性定位元素上添加z-index屬性以便及時地與其他元素進行互動。