在 CSS 中,position
屬性用于設置元素的定位方式。它有四種可能的值,分別是static
、relative
、absolute
和fixed
。
static
是默認值,意味著元素的位置是由文檔流決定的,即按照它在 HTML 中出現的順序在頁面上排列,不能用top
,bottom
,left
,right
屬性來調整位置。
div { position: static; }
relative
使元素相對于它原來的位置進行定位。可以用top
,bottom
,left
,right
屬性來調整位置,在移動到新位置之前,保留原位置的空間。如果不設置偏移值,默認偏移值是 0。
div { position: relative; top: 20px; left: 10px; }
absolute
使元素相對于最近的非static
父元素進行定位,如果沒有非static
父元素,則相對于 body 元素定位。可以用top
,bottom
,left
,right
屬性來調整位置,在移動到新位置之前,不保留原位置的空間。如果不設置偏移值,默認偏移值是 0。
div { position: absolute; top: 20px; left: 10px; }
fixed
使元素相對于瀏覽器窗口進行定位。可以用top
,bottom
,left
,right
屬性來調整位置,在移動到新位置之前,不保留原位置的空間。如果不設置偏移值,默認偏移值是 0。
div { position: fixed; top: 20px; left: 10px; }
position
屬性的值可以通過組合使用,實現更精細的定位效果。例如,通過將一個元素設為relative
,再將其內部元素設為absolute
,內部元素就可以相對于外部元素進行定位。