position定位有哪幾種？各有什麼特色

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【position定位有哪幾種？各有什麼特色    】

 

1、背景介紹
position 是CSS用來爲HTML文檔的一些元素提供定位的屬性,定位的基本思想很簡單，它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。 常規取值： 1.static(靜態） 2.Relative(相對） 3.Absolute(絕對) 4.fixed(固定)

2、知識剖析
文檔流
將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流。 只有三種狀況會使得元素脫離文檔流，分別是：浮動、絕對定位和固定定位。

STATIC(靜態）
HTML元素的默認值，不受top、bottom、left、right屬性影響，元素出如今正常的文檔流中

RELATIVE(相對）
相對定位, 特色：不脫離文檔流的佈局，受top、bottom、left、right屬性影響,只改變自身的位置，在文檔流原先的位置遺留空白區域。定位的起始位置爲此元素原先在文檔流的位置。

ABSOLUTE(絕對)
絕對定位 特色:脫離文檔流的佈局，遺留下來的空間由後面的元素填充。定位的起始位置爲最近的父元素(position不爲static)，不然爲html文檔自己。

FIXED(固定)
固定定位, 特色：相似於absolute，但不隨着滾動條的移動而改變位置。元素的位置相對於瀏覽器窗口是固定位置。

STICKY(定位)
sticky 英文字面意思是粘，粘貼，因此能夠把它稱之爲粘性定位.position: sticky; 基於用戶的滾動位置來定位。 粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。 它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。 元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。 這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。

3、常見問題
相對定位與絕對定位的搭配使用效果？
4、解決方案
父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置再也不相對於瀏覽器左上角，而是相對於父窗口左上角，若無非static祖先，以初始包含塊定位，在瀏覽器裏，根元素的包含塊（HTML）爲初始包含塊，只是通常狀況下看上去像是body區域。

5、編碼實戰

6、拓展思考
absolute與fixed有哪些區別？

fixed與absolute最大的區別在於：absolute的」根元素「是能夠被設置的，而fixed則其」根元素「固定爲瀏覽器窗口。即當你滾動網頁，其元素與瀏覽器窗口之間的距離是恆定不變的。

7、參考文獻
CSS Position 定位屬性
對CSS中的Position、Float屬性的一些深刻探討

8、更多討論

 1 ）position定位相互覆蓋問題

 答：定位覆蓋的優先級仍是先取決於父輩元素的z-index的大小（拼爹），而後纔是本身的z-index的大小。 另外， 相對定位relative元素的定位是相對其正常位置進行移位，不脫離文檔流，它本來所佔的空間不會改變； 絕對定位absolute元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於body，absolute定位使元素的位置與文檔流無關，所以不佔據空間。

 2 ）position:fixed;無效問題

 答：若是一個元素設置了position:fixed;其父元素設置了tansform屬性的話，不論是scale()、rotate()、仍是translate()，其fixed值都會失效，直接會使position:fixed;變成position:absolute;的效果。 因此，咱們fixed的元素的父級有transform屬性的話，fixed效果徹底沒有。

 3 ）假如 position 和 float 同時設置會出現什麼問題？兼容性如何？哪一個屬性會被覆蓋

 答：同時設置後，若是使用的是相對定位，元素會先浮動起來，而後再根據position進行定位。若是使用的時絕對定位，float不會產生任何效果。

9、鳴謝：

感謝， 汪勝師兄，吳澤華師兄 ，此教程是在他們以前技術分享的基礎上完善而成。

10、結束語：

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~