資訊專欄INFORMATION COLUMN
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。
前言
今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。
標準根據MDN文檔，CSS屬性 position 用于指定一個元素在文檔中的定位方式。另外還需要偏移屬性top, right, bottom 和 left來決定了該元素的最終位置。適用于所有元素，沒有繼承性，會創建層疊上下文。而定位的值一共有5種（？）：
position：static 默認值
position：relative 相對定位
position：absolute 絕對定位
position：fixed 固定定位
position：sticky 粘性定位
因為position屬性是非?；A的知識，所以在接下來的篇幅中我不會用很多圖片或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動態判斷修改樣式或者直接就重新布局吧。
這個定位方式相信很多人都沒見過，因為它是一個試驗屬性，文檔建議盡量不要在生產環境中使用。不過它的功能還是很好用的，可以了解一下。
粘性定位是相對定位和固定定位的結合體。根據上下左右的偏移屬性設置閾值。若相對定位時超過閾值會轉變為固定定位。
由于是新屬性,所以去這個demo看看吧。
demo中，代碼主要是
dt{
position: -webkit-sticky;
position: sticky;
top: -1px;
}
首先，從粘性定位在瀏覽器中的支持情況可以看到基本都支持了，除了ie。不過在火狐中不支持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之間的三角關系當元素設置成絕對定位或固定定位時，浮動屬性無效，display也被改為block值。也就是說此時的元素都是塊級元素。
如果display設置為none，此時元素消失，設置的position和float屬性自然沒有意義。
總結花了2個小時，查文檔、書和博客，總結了position屬性的概念、應用場景和表現方式。還有一些相關知識只是一筆帶過，比如BFC、文檔流、外邊距合并等等，以及文檔文字方向這種不太常見的知識。
盡管如此，我覺得僅position屬性而言，我已經將自己目前遇到的點都講述清楚了。還是有點小成就感的，哈哈。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112756.html
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經驗。 標準 根據MDN文檔，CS...
摘要：前言居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。 我們主要從這幾個方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...
摘要：這兩個屬性正是今天的重頭戲，博主曾在從隱藏元素談起提起過，但并沒做深入解釋。另外，四個值分別是相對于圖片左上角為原點的坐標值?；舅械臑g覽器都支持，可以放心使用。 前言 圖片是一個網站必不可少的元素，而呈現出絢麗多彩的圖片效果在很多情況下不僅僅是設計師的工作，通過代碼來修飾圖片也是一個前端工程師必備的技能。因為兼容性的問題，實際項目中可能用的比較少，包括博主自己也只是用過幾次剪切，很...
摘要：我們來看看文檔上是怎么說的吧在中，你并不需要學習什么特殊的語法來定義樣式。我們仍然是使用來寫樣式。這些樣式名基本上是遵循了上的的命名，只是按照的語法要求使用了駝峰命名法，例如將改為。 我遇到了什么問題？ 不久之前我重構了一個古老的項目，總結了一些js方面的想法，不過對于一個前端項目而言不僅僅只由js組成的嘛，上學的時候老師和我說HTML+CSS+JS對應的是頁面的骨架、皮膚和肌肉。既然...
閱讀 2680·2021-11-18 10:02
閱讀 3412·2021-09-28 09:35
閱讀 2592·2021-09-22 15:12
閱讀 750·2021-09-22 15:08
閱讀 3099·2021-09-07 09:58
閱讀 3472·2021-08-23 09:42
閱讀 732·2019-08-30 12:53
閱讀 2083·2019-08-29 13:51
