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