一，相對定位

1. 定義：
   1. position: relative;
   2. 相對定位就是相對於自己以前在標準流中的位置來移動
2. 注意點：
   1. 相對定位是不脫離標準流的, 會繼續在標準流中佔用一份空間
   2. 在相對定位中同一個方向上的定位屬性只能使用一個
   3. 由於相對定位是不脫離標準流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素
   4. 由於相對定位是不脫離標準流的, 並且相對定位的元素會佔用標準流中的位置, 所以當給相對定位的元素設定margin/padding等屬性的時會影響到標準流的佈局
3. 使用場景：
   1. 用於對元素進行微調
   2. 配合後面學習的絕對定位來使用

二，絕對定位

1. 定義：
   1.  position: absolute;
   2. 絕對定位就是相對於body來定位
2. 注意點
   1. 絕對定位的元素是脫離標準流的
   2. 絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素
   3. 如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點
   4. 一個絕對定位的元素會忽略祖先元素的padding
   5. 參考點
      1. 如果一個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
      2. 只要是這個絕對定位元素的祖先元素都可以
      3. 指的定位流是指絕對定位/相對定位/固定定位
      4. 定位流中只有靜態定位不行
      5. 如果一個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點
   6. 水平居中
      1. 只需要設定絕對定位元素的left:50%;
      2. 然後再設定絕對定位元素的 margin-left: -元素寬度的一半px;
3. 使用：子絕父相
   1. 子元素用絕對定位, 父元素用相對定位
   2. 相對定位弊端:
      相對定位不會脫離標準流, 會繼續在標準流中佔用一份空間, 所以不利於佈局介面
   3.  絕對定位弊端:
       預設情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化

三，固定定位

1. 定義：
   1. position: fixed;
   2. 固定定位和前面學習的背景關聯方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
2. 注意點：
   1. 固定定位的元素是脫離標準流的, 不會佔用標準流中的空間
   2. 固定定位和絕對定位一樣不區分行內/塊級/行內塊級
   3. IE6不支援固定定位
3. 使用場景：

四，靜態定位