【每日一題】說說CSS的position屬性
人生苦短，總需要一點儀式感。比如學(xué)前端～
目錄：
概念
position 屬性值
static （默認值）
relative 相對定位
absolute 絕對定位
fixed 固定定位
sticky 粘性定位
initial 使用默認值
inherit 繼承
概念
position 屬性把元素放置到一個“靜態(tài)的/相對的/絕對的/固定的”位置中。
position 屬性值
position 的屬性值共有四個常用的：static、relative、absolute、fixed。
還有不常用的：inherit、initial、sticky
static （默認值）
是 position 的默認值，一般不設(shè)置 position 屬性時，元素會按照正常的文檔流進行排列。
relative 相對定位
主要重點回答“它是相對哪個對象來進行偏移的”，答案是“按照它原本的位置”。也就是 “相對自身進行偏移”。
需要注意的是，相對定位不會脫離文檔流，原來的位置仍然被保留。
absolute 絕對定位
它是相對“不是 static 的、最近一級元素”來進行定位的，如果沒有這樣的元素，那么相對 body 元素來進行定位，被定位元素會脫離文檔流，然后我們可以通過left、right、top、bottom來調(diào)整元素的位置。
或者換句話理解：假設(shè)一個 div 元素，它所有的父級元素屬性都是 position：static，也就是所有父級元素都沒有設(shè)置 position，那么這個 div 就會相對 body 元素來進行定位。
如果這個 div 元素存在某一個父級元素設(shè)置了除 static 以外的 position，那么這個 div 就會相對這個父元素來進行定位。
fixed 固定定位
固定定位是最好理解的，它相對瀏覽器的窗口進行定位并脫離文檔流，即使拖動滾動條，元素的位置也是不變的，我們使用瀏覽器時一些廣告效果就是這樣的。
sticky 粘性定位
position 設(shè)置 sticky 的元素，在屏幕范圍時該元素的位置并不受到定位影響(設(shè)置是 top、left 等屬性無效)，當該元素的位置將要移出偏移范圍的時候，定位又會變成 fixed，根據(jù)設(shè)置的 left、top 等屬性成為固定位置的效果。
可以用來做這種固釘效果：https://ant.design/components/affix-cn/
向上滾動一段距離：
sticky 屬性有以下幾個特點：
-
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 -
該元素在容器中被滾動超過指定的偏移量時，元素在容器內(nèi)固定在指定的位置。例如你設(shè)置了 top：50px，那么在 sticky 元素到達距離相對定位的元素頂部 50px 的位置時固定，不再向上移動。 -
元素固定的相對偏移量是相對離它最近的具有滾動框的祖先元素，如果祖先元素都不可滾動，那么相對于 viewport 來計算元素的偏移量，
但是這個屬性的兼容性還不是很友好，需要注意一下。
initial 使用默認值
initial 關(guān)鍵字用于設(shè)置 css 屬性為它的默認值，可作用于任何 css 樣式。(IE 不支持該關(guān)鍵字)
inherit 繼承
繼承父元素的 position 屬性，但需要注意的是 IE8 以及往前的版本都不支持 inherit 屬性。
以上，面試常問的用紅色字加粗強調(diào)了。
其他跟position相關(guān)的布局技巧，請看這幾篇文章：
● 三欄響應(yīng)式布局(左右固寬中間自適應(yīng))的5種方法
所有《每日一題》的 知識大綱索引腦圖 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以點擊文末的 “閱讀原文” 快速跳轉(zhuǎn)
讓我們一起攜手同走前端路！
關(guān)注公眾號回復(fù)【加群】即可