在CSS中,我們可以使用<position>
屬性來移動
標簽的位置。該屬性有五個值可用:
static:元素不會被移動。這是默認值。 relative:元素相對于其正常位置進行移動。可以在<top>
、<right>
、<bottom>
和<left>
中指定距離。 absolute:元素相對于其第一個已定位的祖先元素進行移動。如果祖先元素都沒有已定位,則相對于文檔的根元素進行移動。 fixed:元素相對于窗口進行移動。元素的位置在滾動時不會改變。 sticky:元素在滾動到特定位置時變為固定位置,直到滾動回到該位置。
例如,我們可以將一個
標簽設置為絕對定位,并將其移動到頁面的右上角:
p { position: absolute; top: 0; right: 0; }
這將使
標簽相對于最近的已定位祖先元素(如果沒有,則相對于文檔的根元素)移動到頁面的右上角。要相對于可視窗口定位元素,可以將<position>
屬性設置為fixed
:
p { position: fixed; top: 0; right: 0; }
這將使
標簽在滾動時保持在頁面的右上角。您還可以將<position>
屬性設置為relative
,然后在<top>
、<right>
、<bottom>
和<left>
中指定元素的偏移量。
有時,我們需要完全移除
標簽的位置,并將其作為其他元素的一部分。為此,我們可以使用<float>
屬性。例如,我們可以將
標簽浮動到頁面右側:
p { float: right; width: 200px; /* 如果不指定寬度,則浮動元素將填充所在容器的全部寬度 */ }
現在,
標簽與其它元素共享行,并且其右側將留出200像素的空間。