這裡是修真院前端小課堂，每篇分享文從
八個方面深度解析前端知識/技能，本篇分享的是：
【position定位有哪幾種？各有什麼特點 】
一、背景介紹
position 是css用來為html文件的一些元素提供定位的屬性,定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素、另乙個元素甚至瀏覽器視窗本身的位置。 常規取值： 1.static(靜態） 2.relative(相對） 3.absolute(絕對) 4.fixed(固定)
二、知識剖析
文件流將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流。 只有三種情況會使得元素脫離文件流，分別是：浮動、絕對定位和固定定位。
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 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
三、常見問題
相對定位與絕對定位的搭配使用效果？
四、解決方案
父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置不再相對於瀏覽器左上角，而是相對于父視窗左上角，若無非static祖先，以初始包含塊定位，在瀏覽器裡，根元素的包含塊（html）為初始包含塊，只是一般情況下看上去像是body區域。
五、編碼實戰
六、拓展思考
absolute與fixed有哪些區別？
fixed與absolute最大的區別在於：absolute的」根元素「是可以被設定的，而fixed則其」根元素「固定為瀏覽器視窗。即當你滾動網頁，其元素與瀏覽器視窗之間的距離是恆定不變的。
七、參考文獻
css position 定位屬性
對css中的position、float屬性的一些深入**
八、更多討論
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不會產生任何效果。
九、鳴謝：
感謝， 汪勝師兄，吳澤華師兄 ，此教程是在他們之前技術分享的基礎上完善而成。
十、結束語：
position定位有哪幾種？各有什麼特點？
這裡是修真院前端小課堂，每篇分享文從 八個方面深度解析前端知識 技能，本篇分享的是 position定位有哪幾種？各有什麼特點？修真院css小課堂 position定位有哪幾種？各有什麼特點？開場語 position定位有哪幾種？各有什麼特點？1 背景介紹 定位分為三種 相對定位 讓元素讓元素相對於...
css定位有哪幾種方式？
相信很多的初學者和我一樣在剛接觸有關浮動和定位都有些搞不清楚，在這裡我將介紹一下我所理解的有關 css的定位方式。在css中浮動主要是解決一些有關布局的左右排列問題，其實定位的作用和浮動的作用差不多，不過區 別是定位用來解決疊加排列的問題。在用定位時，你需要寫position屬性，position ...
css定位哪幾種方式
1.position static 預設值 2.position absolute 絕對定位 3.position relative 相對定位 4.position fixed 固定定位 5.position sticky 粘性定位 特徵position static 預設值，設定座標無效 posi...