細(xì)說(shuō)css中的position屬性

ssshooter 發(fā)布于2019-08-30 14:07 / 1064人閱讀

摘要：塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。相對(duì)定位，相對(duì)于自己的初始位置，不脫離文檔流。

有過(guò)css開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)，對(duì)于position這個(gè)屬性一定不會(huì)陌生，然而這個(gè)熟悉的屬性確是面試題中的常客，也就說(shuō)明了該屬性在css的世界是有一定的江湖地位的，那么我們就來(lái)詳細(xì)的說(shuō)說(shuō)position這個(gè)屬性。
在w3school中是這樣解釋position屬性的

定義和用法
position 屬性規(guī)定元素的定位類(lèi)型。
說(shuō)明
這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類(lèi)型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

CSS 定位機(jī)制

CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。  
除非專(zhuān)門(mén)指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。  
塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。  
行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱(chēng)為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。

position屬性對(duì)應(yīng)的值有

position: static;

position: inherit;

position: relative;

position: absolute;

position: fixed;

position: sticky;（新的屬性值）

1、position: static

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

2、position: inherit

inherit值如同其他css屬性的 inherit 值，即繼承父元素的position值。

3、position: relative

相對(duì)定位，相對(duì)于自己的初始位置，不脫離文檔流。也就是說(shuō)元素框偏移某個(gè)距離，元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
舉個(gè)例子，html結(jié)構(gòu)

div1
div2
div3

css樣式

div {
    width: 100px;
    height: 100px;
}

.div1 {
    background: #ffff00;
}

.div2 {
    background: #00ff00;
    position: relative;
    top: 40px;
    left: 40px;
}

.div3 {
    background: #0000ff;
}

結(jié)果

其中紅色框?yàn)?b>div2的初始位置，由于div2設(shè)置了position:relative;top: 40px;left: 40px;，所以該元素相對(duì)于自己的初始位置的上面40px、左邊40px。同時(shí)，其他元素的位置未被改變。

4、position: absolute

絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。
例子中我們把div2的樣式稍作改動(dòng)

.div2 {
    background: #00ff00;
    position: absolute;
    top: 40px;
    left: 40px;
}

由于div2的祖先元素都沒(méi)有定位，所以相對(duì)于最初的包含塊也就是body，同時(shí)由于絕對(duì)定位脫離文檔流，所以div3占了div2原來(lái)的位置。

5、position: fixed

fixed元素脫離正常的文檔流，所以它與absolute元素很相似，同樣會(huì)被周?chē)睾雎裕С?b>top,bottom,left,right屬性，但fixed 元素正如它的名字一樣，它是固定在屏幕的某個(gè)位置，它不會(huì)隨著瀏覽器滾動(dòng)條的滾動(dòng)而一起滾動(dòng)。比如我們常見(jiàn)的回到頂部的功能，按鈕一直在瀏覽器的左下方，不管滾動(dòng)條如何滾動(dòng)，該按鈕都會(huì)在左下方的固定的位置，這個(gè)需求就可以使用position: fixed來(lái)完成。
但需要注意的是，position: fixed是有兼容性問(wèn)題的，不支持IE6、IE7、IE8?？梢酝ㄟ^(guò)給該元素設(shè)置position: absolute并獲取滾動(dòng)條距離頂部高度加上某個(gè)固定高度來(lái)實(shí)現(xiàn)。

6、position: sticky

很多同學(xué)會(huì)對(duì)該屬性比較陌生，這是一個(gè)相對(duì)來(lái)講比較新的屬性值。
sticky 的本意是粘貼，可以稱(chēng)之為粘性定位，但在 css 中的表現(xiàn)更像是吸附。這是一個(gè)結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位。常見(jiàn)的吸頂、吸底（網(wǎng)站的頭部返回欄，底部切換欄之類(lèi)）的效果用這個(gè)屬性非常適合。例如下面淘寶這個(gè)效果

當(dāng)元素距離頁(yè)面視口（Viewport，也就是fixed定位的參照）頂部距離大于 0px 時(shí)，元素以 relative 定位表現(xiàn)，而當(dāng)元素距離頁(yè)面視口小于 0px 時(shí)，元素表現(xiàn)為 fixed 定位，也就會(huì)固定在頂部。

注意

須指定 top、right、bottom、left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

并且 top 和 bottom 同時(shí)設(shè)置時(shí)，top 生效的優(yōu)先級(jí)高，left 和 right 同時(shí)設(shè)置時(shí)，left 的優(yōu)先級(jí)高。

設(shè)定為 position:sticky 元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則 position:sticky 不會(huì)生效。如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 overflow:hidden，則父容器無(wú)法進(jìn)行滾動(dòng)，所以 position:sticky 元素也不會(huì)有滾動(dòng)然后固定的情況。如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 position:relative | absolute | fixed，則元素相對(duì)父元素進(jìn)行定位，而不會(huì)相對(duì) viewport 定位。

達(dá)到設(shè)定的閥值，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。

兼容性 caniuse