CSS 中的 position
屬性用來設置元素的定位方式。
position
的值有 static
、relative
、absolute
、fixed
和 sticky
,默認值為 static
,position
值為 relative
、absolute
、fixed
或 sticky
的元素成為定位元素,top
、right
、bottom
和 left
屬性為被定位元素指定位置。
static
position
屬性值為 static
的元素使用正常的布局行為,top
、right
、bottom
、left
和 z-index
屬性無效。
relative
position
屬性值為 relative
的元素被稱為相對定位元素。相對定位元素相對于未設置 position
屬性為 relative
時該元素的位置進行定位。其位置調整是在不改變頁面布局的前提下調整的,也就是說其原始位置會留下空白。
absolute
position
屬性值為 absolute
的元素被稱為絕對定位元素。絕對定位元素相對于最近的非 static
祖先元素進行定位,如果不存在這樣的祖先元素,則相對于根元素進行定位。與相對定位元素不同的是,絕對定位元素脫離了文檔流,在文檔流中不占據空間。
注意,如果同時指定了 top
和 bottom
(非 auto),優先采用 top
;如果同時指定了 left
和 right
,優先采用 left
。
fixed
position
屬性值為 fixed
的元素被稱為固定定位元素。固定定位元素相對于瀏覽器窗口進行定位,其位置不隨頁面滾動而發生變化。與絕對定位元素相同,固定定位元素也脫離了文檔流,在文檔流中不占據空間。
sticky
IE 和 Edge 瀏覽器不支持此屬性值!
position
屬性值為 sticky
的元素被稱為粘性定位元素。粘性定位是相對定位和固定定位的混合,元素在跨越特定閾值前為相對定位,之后為固定定位。例如下面代碼中的 box
元素,它在距離瀏覽器窗口上邊距離大于 20px 時為相對定位,隨著頁面的滾動而滾動,當距離等于 20px 后,就會變為固定定位,其位置將不會繼續隨著頁面滾動而變化。
.box {
width: 50px;
height: 50px;
background-color: red;
position: sticky;
top: 20px;
}
注意,只有指定了 top
、right
、bottom
或 left
其中之一,粘性定位才會生效,否則和相對定位效果相同。