技術交流QQ群:1027579432吴攒，歡迎你的加入肠缔！

歡迎關注我的微信公眾號：CurryCoder的程序人生

1.為什么需要定位跛璧？

• 引入問題：一些情況使用標準流或浮動能實現(xiàn)嗎？
  • 1.某個元素可以自由的在一個盒子內(nèi)移動位置望蜡，并且壓住其他盒子。
    
    需求1.png
  • 2.當我們滾動窗口的時候，盒子是固定在屏幕的某個位置。
    
    需求2.png
• 以上效果源葫，標準流或浮動都無法快速實現(xiàn)，此時需要定位來實現(xiàn)砖瞧。所以：
  • 浮動可以讓多個盒子在一行沒有縫隙的排列顯示息堂，經(jīng)常用于橫向排列的盒子。
  • 定位則是可以讓盒子自由的某個盒子的內(nèi)部移動位置或者固定在屏幕中的某個位置块促，并且可以壓住其他盒子荣堰。

2.定位的組成

• 定位：將盒子定在某一個位置，所以定位也是在擺盒子竭翠，按照定位的方式移動盒子振坚。
• 定位 = 定位模式 + 邊偏移
• 定位模式：用于指定一個元素在文檔中的定位方式；邊偏移則決定了該元素的最終位置斋扰。

2.1定位模式

• 定位模式?jīng)Q定了元素的定位方式渡八，它通過CSS的position屬性來設置，其值可以分為以下四個：
  
  定位模式.png

2.2 邊偏移

• 邊偏移就是定位的盒子移動到最終的位置传货。有top屎鳍、bottom、left和right這4個屬性问裕。
  
  邊偏移.png

3.相對定位static(了解)

• 靜態(tài)定位是元素的默認定位方式逮壁，無定位的意思。
• 語法：

  選擇器 {
      position: static;
  }
  

• 靜態(tài)定位是按照標準流的特性來擺放位置粮宛，它沒有邊偏移貌踏；
• 靜態(tài)定位在布局時很少使用；

4.相對定位relative(重要)

• 相對定位是元素在移動位置的時候窟勃，是相對于它原來的位置來說的。
• 語法：

  選擇器 {
      position: relative;
  }
  

相對定位原理解釋.png

• 相對定位的注意點：
  • 它是相對于自己原來的位置來移動的(移動位置的時候是參照點是自己原來的位置)逗堵。
  • 原來在標準流的位置會繼續(xù)占有秉氧，后面的盒子仍然以標準流的方式來對待它。(不脫標蜒秤，繼續(xù)保留原來的位置)汁咏。
• 因此亚斋，相對定位并沒有脫標。它典型的應用是給絕對定位當?shù)摹?/li>

5.絕對定位absolute(重要)

• 絕對定位是元素在移動位置的時候攘滩，是相對于它祖先元素來說的帅刊。
• 語法：

  選擇器 {
      position: absolute;
  }
  

沒有祖先元素，絕對定位原理解釋.png

祖先元素有定位漂问，絕對定位原理解釋.png

絕對定位不再占有原來的位置(脫標).png

• 絕對定位的特點：
  • 如果沒有祖先元素或祖先元素沒有定位赖瞒，則以瀏覽器為準進行定位(Document文檔)。
  • 如果祖先元素有定位(相對蚤假、絕對栏饮、固定定位)，則以最近一級有定位的祖先元素為參考點進行移動位置磷仰。
  • 絕對定位不再占有原來的位置(脫標)袍嬉。

6.子絕父相的由來

• 子絕父相的口訣是學習定位時必須記住的，它的意思是：子級元素是絕對定位的話灶平，父級元素要用相對定位伺通。
  
  子絕父相解釋.png
• 子級元素使用絕對定位，不會占有位置逢享，可以放到父級盒子中的任何一個地方罐监，不會影響其他的兄弟盒子。
• 父級盒子需要加定位來限制子級盒子在父盒子內(nèi)的顯示拼苍。
• 父級盒子布局時笑诅，需要占有位置，因此父級盒子只能是相對定位疮鲫。
• 總結：因為父級盒子需要占有位置吆你，因此是相對定位；子級盒子不需要占有位置俊犯，則是絕對定位妇多。
• 子絕父相不是永遠不變的，如果父元素不需要占有位置燕侠，子絕父絕也是會遇到的者祖。

7.固定定位fixed(重要)

• 固定定位是元素固定于瀏覽器可視區(qū)的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會發(fā)生改變绢彤。
• 語法：

  選擇器 {
      position: fixed;
  }
  

• 固定定位的特點：
  • 以瀏覽器的可視窗口為參考點移動元素七问。
    • 與父元素沒有任何關系。
    • 不隨滾動條滾動茫舶。
  • 固定定位不占有原先的位置械巡。
    • 固定定位也是脫標的，其實固定定位也可以看成是一種特殊的絕對定位。
• 固定定位小技巧——固定到版心右側
  • 小算法：
    • a.先讓固定定位的盒子left: 50%讥耗，走到瀏覽器可視窗口的一半位置有勾。
    • b.再讓固定定位的盒子margin-left: 版心寬度的一半距離。多走版心寬度的一半為位置古程。

8.粘性定位sticky(了解)

• 粘性定位可以被認為是相對定位和固定定位的混合蔼卡。
• 語法：

  選擇器 {
      position: sticky;
      top: 10px;
  }
  

• 粘性定位的特點：
  • 以瀏覽器的可視窗口為參照點移動元素(固定定位的特點)。
  • 粘性定位占有原先的位置(相對定位的特點)挣磨。
  • 必須添加top雇逞、left、right趋急、bottom其中的一個才有效喝峦！
• 粘性定位與頁面滾動搭配使用，兼容性較差呜达，IE不支持!

9.定位總結

• 注意區(qū)分相對定位谣蠢、固定定位、絕對定位的兩大特點：1.是否占有位置(脫標否)查近；2.以誰為基準點進行移動眉踱；

• 學習定位的重點是子絕父相；

  
  
  定位總結.png

10.定位的疊放順序z-index

• 在使用定位布局時霜威，可能會出現(xiàn)盒子重疊的情況谈喳。此時，可以使用z-index來控制盒子的前后次序(z軸)戈泼。
• 語法：

  選擇器 {
      z-index: 1;
  }
  

• 數(shù)值可以是正整數(shù)婿禽、負整數(shù)或0，默認是auto大猛，數(shù)值越大扭倾，盒子越靠上。
• 如果屬性值相同挽绩，則按照書寫順序膛壹，后來者居上！
• 數(shù)字后面不能加單位唉堪！
• 只有定位的盒子才有z-index屬性模聋！

11.定位的拓展

1.絕對定位的盒子居中算法

• 加了絕對定位的盒子不能通過margin: 0 auto;水平居中，但是可以通過以下計算方法實現(xiàn)水平和垂直居中唠亚。
• 水平居中
  • left: 50%;：讓盒子的左側移動到父級元素的水平中心位置链方；
    
    步驟1.png
  • margin-left: -100px;：讓盒子向左移動自身寬度的一半；
    
    步驟2.png
• 垂直居中
  • top: 50%;：讓盒子的上側移動到父級元素的垂直中心位置灶搜；
  • margin-top: -100px;：讓盒子向上移動自身高度的一半侄柔；

2.定位的特殊特性

• 絕對定位與固定定位也和浮動類似共啃。
  • 行內(nèi)元素添加絕對或固定定位，可以直接設置高度或?qū)挾取?/li>
  • 塊級元素添加絕對或固定定位暂题，如果不給寬度或高度，默認的大小是內(nèi)容的大小究珊。

3.脫標的盒子不會觸發(fā)外邊距塌陷

• 浮動元素薪者、絕對定位、固定定位元素都不會觸發(fā)外邊距合并的問題剿涮。

4.決定定位/相對定位會完全壓住盒子

• 浮動元素只會壓住它下面標準流的盒子言津，但是不會壓住下面標準流盒子里面的文字、圖片取试。浮動之所以不會壓住文字悬槽，因為浮動產(chǎn)生的目的最初是為了做文字環(huán)繞效果的，文字會圍繞浮動元素瞬浓。
• 但是初婆，絕對定位/固定定位會壓住下面標準流中所有的內(nèi)容！

12.資料下載

• 筆記及代碼猿棉，歡迎star,follow,fork......