### 四種position定位 **1. positon:static; 靜態定位（默認的 ）**         所有標準文檔流中的元素都是靜態定位 **2. positon:relative; 相對定位**         不脫離標準文檔流，“老家留坑，形影分離”         特點：如果設置了相對定位并且設置了top、left、right、bottom屬性，那么將來盒子會以盒子原來所在的位置進行偏移 　　相對定位的用途：一般不用于做“壓蓋效果”，就兩個作用： 　　（1）微調元素 　　（2）絕對定位的參考，子絕父相 　　可以用left、right來描述盒子右、左的偏移；可以用top、bottom來描述盒子下、上的偏移 ``` position：relative； top：10px; left：10px; //相對于原來位置向右下移10px ``` ``` position：relative; top:-10px; left:-10px; //相對于原來位置向左上移10px ``` **3. position:absolute; 絕對定位** 　　脫離標準文檔流 　　特點：（1）如果這個元素沒有父元素，那么將來top、left、right、bottom是相對于瀏覽器窗口來定位的 　　　　　（2）如果絕對定位的元素有父元素，但父元素沒有相對定位，那么這個時候top、left、right、bottom還是相對于瀏覽窗口來定位的 　　　　　（3）如果絕對定位的元素有父元素，而且父元素有定位（非static），那么這個絕對定位的元素偏移是以自己的父元素為基礎 　　　　　（4）絕對定位之后的元素在頁面上不會占據位置 **4. position:fixed; 固定定位** 　　脫離標準文檔流 　　固定定位的用途：頁面中的某些小廣告，需要固定在頁面中的一個位置不變 **總結：將來在寫頁面的時候，用的最多的不是絕對定位也不是相對定位，而是絕對定位與相對定位一起使用 　　　規范：子絕父相（子元素使用絕對定位，父元素使用相對定位）** ---- 本文引自[博客園](https://www.cnblogs.com/520chensiqi/p/6540068.html)