定位有三種，分別是相對定位、絕對定位、固定定位。

1、相對定位：position:relative;
2、絕對定位：position:absolute;
3、固定定位：position:fixed;
4、關於z-index

1、相對定位：position:relative;

1.1相對定位介紹

相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。

如果一個盒子想進行位置調整，那麼就要使用相對定位

 position:relative;   → 必須先宣告，自己要相對定位了
 left:100px;          → 然後進行調整。
 top:150px;           → 然後進行調整。
 

1.2 不脫標，老家留坑，形影分離

相對定位不脫離標準文件流，真實位置是在老家，只不過影子出去了，可以到處飄。

1.3相對定位用途

相對定位有坑，所以一般不用於做“壓蓋”效果。頁面中，效果極小。就兩個作用：
1） 微調元素
2） 做絕對定位的參考，子絕父相

1.4 相對定位的定位值

可以用left、right來描述盒子右、左的移動；
可以用top、bottom來描述盒子的下、上的移動。

2、絕對定位：position:absolute;

2.1絕對定位介紹

絕對定位比相對定位更靈活

2.1絕對定位脫標

絕對定位的盒子，是脫離標準文件流的。
所以，所有的標準文件流的性質，絕對定位之後都不遵守了。
絕對定位之後，標籤就不區分所謂的行內元素、塊級元素了，不需要display:block;就可以設定寬、高了

    span{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
    }

2.2參考點

• 絕對定位的參考點，如果用top描述，那麼定位參考點就是頁面的左上角，而不是瀏覽器的左上角：

• 如果用bottom描述，那麼就是瀏覽器首屏視窗尺寸，對應的頁面的左下角：

面試題：

2.3 以盒子為參考點

一個絕對定位的元素，如果父輩元素中出現了也定位了的元素，那麼將以父輩這個元素，為參考點。

• 要聽最近的已經定位的祖先元素的，不一定是父親，可能是爺爺：

  <div class="box1">   →  相對定位
      <div class="box2">  →  沒有定位
          <p></p>   → 絕對定位，將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素
      </div>
  </div>
  
  
  <div class="box1">   →  相對定位
      <div class="box2">  → 相對定位
          <p></p>   → 絕對定位，將以box2為參考，因為box2是自己最近的父輩元素
      </div>
  </div>
  

• 不一定是相對定位，任何定位，都可以作為參考點

子絕父絕、子絕父相、子絕父固，都是可以給兒子定位的。但是子絕、父絕，沒有一個盒子在標準流裡面了，所以頁面就不穩固，沒有任何實戰用途。

So,“子絕父相”有意義，父親沒有脫標，兒子脫標在父親的範圍裡面移動。

- 絕對定位的兒子，無視參考的那個盒子的padding。

下圖中，綠色部分是div的padding，藍色部分是div的內容區域。那麼此時，div相對定位，p絕對定位。
p將無視父親的padding，在border內側為參考點，進行定位：

2.4 絕對定位的盒子居中

絕對定位之後，所有標準流的規則，都不適用了。所以margin:0 auto;失效。

解決辦法：left:50%; margin-left:負的寬度的一半。（三句話）

        width: 600px;
        height: 60px;
        position: absolute;→ 第一句
        left: 50%;→ 第二句
        top: 0;
        margin-left: -300px;   → 第三句。寬度的一半

3、固定定位：position:fixed;

固定定位，就是相對瀏覽器視窗定位。頁面如何滾動，這個盒子顯示的位置不變。

固定定位脫標！IE6不相容。

4、關於z-index

• z-index值表示誰壓著誰。數值大的壓蓋住數值小的。
• 只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的東西不能用。
• z-index值沒有單位，就是一個正整數。預設的z-index值是0。

• 如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。

• 從父現象：父親慫了，兒子再牛逼也沒用。

總結：

• 相對定位相對於自身位置移動
• 絕對定位：
  有已定位祖先元素：以距離最近的祖先元素為參照 （以上2.3）
  無已定位祖先元素：以為參照（以上2.2）

一般使用：（子絕父相）
子元素設定絕對定位，父元素設定相對定位