CSS position 詳解

CSS 中的 position 屬性用來設置元素的定位方式。

position 的值有 staticrelativeabsolutefixedsticky,默認值為 staticposition 值為 relativeabsolutefixedsticky 的元素成為定位元素,toprightbottomleft 屬性為被定位元素指定位置。

static

position 屬性值為 static 的元素使用正常的布局行為,toprightbottomleftz-index 屬性無效。

relative

position 屬性值為 relative 的元素被稱為相對定位元素。相對定位元素相對于未設置 position 屬性為 relative 時該元素的位置進行定位。其位置調整是在不改變頁面布局的前提下調整的,也就是說其原始位置會留下空白。

absolute

position 屬性值為 absolute 的元素被稱為絕對定位元素。絕對定位元素相對于最近的非 static 祖先元素進行定位,如果不存在這樣的祖先元素,則相對于根元素進行定位。與相對定位元素不同的是,絕對定位元素脫離了文檔流,在文檔流中不占據空間。

注意,如果同時指定了 topbottom(非 auto),優先采用 top;如果同時指定了 leftright,優先采用 left

fixed

position 屬性值為 fixed 的元素被稱為固定定位元素。固定定位元素相對于瀏覽器窗口進行定位,其位置不隨頁面滾動而發生變化。與絕對定位元素相同,固定定位元素也脫離了文檔流,在文檔流中不占據空間。

sticky

IE 和 Edge 瀏覽器不支持此屬性值!

position 屬性值為 sticky 的元素被稱為粘性定位元素。粘性定位是相對定位和固定定位的混合,元素在跨越特定閾值前為相對定位,之后為固定定位。例如下面代碼中的 box 元素,它在距離瀏覽器窗口上邊距離大于 20px 時為相對定位,隨著頁面的滾動而滾動,當距離等于 20px 后,就會變為固定定位,其位置將不會繼續隨著頁面滾動而變化。

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 20px;
}

注意,只有指定了 toprightbottomleft 其中之一,粘性定位才會生效,否則和相對定位效果相同。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容