在CSS中,我們可以使用position
屬性來設(shè)置元素的位置,如果你想讓一個元素的位置不變,你可以將其設(shè)置為position: fixed
,這樣,元素就會固定在瀏覽器窗口的某個位置,即使頁面滾動,它也會保持在那個位置。
假設(shè)你有一個元素,你希望它在頁面的右上角始終保持固定位置,你可以這樣寫CSS代碼:
.fixed-element { position: fixed; top: 0; right: 0; }
這段代碼中,.fixed-element
是元素的類名,position: fixed;
表示該元素的位置是固定的,top: 0;
表示該元素的頂部與頁面的頂部對齊,right: 0;
表示該元素的右側(cè)與頁面的右側(cè)對齊。
如果你想讓一個元素在頁面的某個位置保持相對固定,即元素的位置相對于其***近的定位祖先(如果存在的話)是固定的,你可以將其設(shè)置為position: relative
,這樣,元素就會相對于其***近的定位祖先來定位,即使頁面滾動,它也會保持在那個位置。
假設(shè)你有一個元素,你希望它在***近的定位祖先元素的右上角始終保持相對固定位置,你可以這樣寫CSS代碼:
.relative-element { position: relative; top: 0; right: 0; }
這段代碼中,.relative-element
是元素的類名,position: relative;
表示該元素的位置是相對于其***近的定位祖先元素的,top: 0;
表示該元素的頂部與***近的定位祖先元素的頂部對齊,right: 0;
表示該元素的右側(cè)與***近的定位祖先元素的右側(cè)對齊。