關於css中的position屬性

position 屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置位移。本文我們就來談談關於css中的position屬性。

標準

根據MDN文檔，CSS屬性 position 用於指定一個元素在文檔中的定位方式。另外還需要位移屬性top, right, bottom 和 left來決定了該元素的最終位置。適用於所有元素，沒有繼承性，會建立層疊上下文。而定位的值一共有5種（？）：

1. position：static 預設值

2. position：relative 相對定位

3. position：absolute 絕對位置

4. position：fixed 固定定位

5. position：sticky 粘性定位

因為position屬性是非常基礎的知識，所以在接下來的篇幅中我不會用很多圖片或demo示範效果。畢竟這些內容應該是查閱文檔或教程就能知道的。

預設值static

當元素的position屬性沒有設定或者值為static時，元素處於文檔流中，且left等位移屬性是不起作用的。文檔中還說z-index值無效。我想了一下，如果元素是處於正常文檔流中，一般是不會有其他元素與他在層疊上有上下的衝突，所以z-index的應用情境基本是沒有的。也許有我漏考慮的地方？除了這些，static也沒有什麼特殊的地方了。

相對定位relative

設定相對定位的元素仍然處於文檔流中，其佔據的空間仍然保留。但是如果設定了上下左右位移屬性，它會相對於原位置向相應的方向移動，此時元素空間仍存在，周圍元素不會重新排列。也就是說，該元素原有的位置上被放置了一塊透明的磚塊，看不見但摸得著。另外，相對定位元素會建立一個包含塊，用於作為內部子項目定位的基點。

包含塊的定義：由最近的塊級祖先框，表儲存格或行內塊inline-block祖先框的內容邊界（content edge）構成。

包含塊的判定：

絕對位置absolute

絕對位置元素會脫離文檔流（normal flow），此時其原有空間為0，也就是不存在透明磚塊佔位。附近元素也會重新排列。同時，該元素會產生格式化上下文（BFC），上下外邊距不會合并，不會因為內部浮動元素產生高度塌陷。

之所以要解釋一下包含塊的定義和判斷，是因為絕對位置元素的錨點就是最近的包含塊,設定的上下左右位移屬性都是以包含塊的左上方為原點（這個跟文字方向有關）。從中可以看出，如果絕對位置的祖先元素position屬性都是static，那麼會相對於初始包含塊————body定位。如果存在position屬性為其他值的祖先元素，則相對於其建立的包含塊定位。

這裡其實想跟浮動元素做個對比，看到張鑫旭部落格裡提到過浮動元素可以看作有寬無高的inline-block元素，而絕對位置則是無寬無高的inline-block元素。至於為什麼看成inline-block元素，我也不太記得了~

固定定位fixed

固定定位元素，相對於螢幕視口定位，這種情況下不會因為滾動而改變位置。如果是列印網頁，該元素會出現在每個頁面中的固定位置。另外，固定定位元素也會建立格式化上下文。
文檔中還提到，有一種特殊情況會影響fixed定位。就是當父級元素的transform屬性不會none時，固定定位的容器改為該父級元素，而不是視口。這種意外情況是需要注意和避免的。
最後，如果你是個移動端web開發人員，還會遇到ios系統webview下fixed布局的一些bug。這些bug可能無法找到完美的解決方案，所以遇到的話就考慮js動態判斷修改樣式或者直接就重新布局吧。

粘性定位sticky

這個定位方式相信很多人都沒見過，因為它是一個實驗屬性，文檔建議盡量不要在生產環境中使用。不過它的功能還是很好用的，可以瞭解一下。

粘性定位是相對定位和固定定位的結合體。根據上下左右的位移屬性設定閾值。若相對定位時超過閾值會轉變為固定定位。

由於是新屬性,所以去這個demo看看吧。

demo中，代碼主要是

dt{
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
}

首先，從粘性定位在瀏覽器中的支援情況可以看到基本都支援了，除了ie。不過在Firefox中不支援table相關元素，chrome中不支援thead和tr等元素。因此想要正常使用，可能需要加上-webkit等首碼。
其次，設定top:-1px作為閾值。當元素作為相對定位元素時，如果其頂部相對於包容塊的距離>=-1px，就會轉變為固定定位。所以要使用粘性定位，閾值的設定是關鍵。

除了demo中展示的功能，粘性定位的應用情境還可以用在所謂的sticky footer中。相信有很多時候產品都會要求這樣的布局吧~

寬度受限的定位元素

很多時候，我們將絕對位置的元素垂直水平置中使用的是

position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:50%;
height:50%;
margin:auto;

這種情況下，由於margin設定為auto值，而根據等式:
margin+border+padding+width=元素寬度/高度
所以會設定margin為相應方向上空餘部分的一半，實現置中的情況。

但是，絕對位置元素不是脫離文檔流了嗎？為什麼margin還會起作用呢？原來是因為我們還設定了上下左右位移屬性。一般我們只需設定上或下、左或右，如果同時設定了上下或左右，也就是說，對立定位方向屬性同時有具體定位元值的時候，流體特性就發生了。此時，絕對位置元素的寬度就會隨著包含塊的寬度進行適應。這種情況下的絕對位置元素就和正常文檔流的元素一樣，可以使用margin：auto進行置中了。

display/float/position之間的三角關係

1. 當元素設定成絕對位置或固定定位時，浮動屬性無效，display也被改為block值。也就是說此時的元素都是區塊層級元素。

2. 如果display設定為none，此時元素消失，設定的position和float屬性自然沒有意義。

以上內容就是關於css中的position屬性，希望能協助到大家。

相關推薦：

css中的position屬性

CSS position屬性執行個體詳解

CSS Position屬性怎麼使用的