相對定位和絕對定位，不改變元素的大小形狀，只改變元素的位置。
相對定位和絕對定位是通過position屬性來控制的，position屬性的值為下面幾種：
position默認值為static,如果在css中不指定，則默認為static.
相對定位：
下面講一下相對定位：對某元素設置了相對定位，那么首先這個元素他會跟其它的元素一樣，出現在文檔流中它該出現的位置，然后，我們可以設置它的水平或垂直偏移量，讓這個元素相對於它在文檔流中的位置的起始點進行移動。有一點要注意;在使用相對定位時，就算元素被偏移了，但是他仍然占據着它沒偏移前的空間.
建立3個方塊，如下圖所示：
為第二個塊設置了相對定位position:relative，如果不對齊設置偏移量，則不會發生變化。如果為其設置上偏移量left:50px ; top:30px，則其變化如下圖：
這是我們可以看到第二個塊針對它本身位置的起始點進行了一個偏移，但是它原來所占據的那個位置空間依然還在(虛線框標示的地方)，即使我們把偏移量設置得再大一點，使它完全離開原來的位置，它原來位於文檔流中的位置仍然會存在，不會被第三個塊浮動過來填補掉。同時，它的偏移也不會把別的塊從文檔流中原來的位置擠開，如果有重疊的地方它會重疊在其它文檔流元素之上，而不是把它們擠開，就像圖中那樣，它已經覆蓋在了第三個塊之上。
絕對定位：
下面我們介紹一下：絕對定位：被設置了絕對定位的元素，在文檔流中是不占據空間的，如果某元素設置了絕對定位，那么它在文檔流中的位置會被刪除。其和相對定位的不同點在於，相對對定位不會刪除它本身在文檔流中占據的那塊空間，而絕對定位則會刪除掉該元素在文檔流中的位置，完全從文檔流中抽了出來。
絕對定位的參考對象就不是自己了，而是最近的已設置了position的祖先元素，並且position不是static，而是absolute或者relative。首先看它的父元素是否設置了position為absolute或者relative，如果有就按父元素的左上角作為參考點，如果沒有則再找祖父元素、曾祖父元素、高祖父元素，如果都沒有就以頁面文檔的初始位置作為參考點。
絕對定位的元素相對於誰來定位，我們就把這個"誰"叫着參照物，看下圖理解 ：
舉個小例子，我們先看一下沒有使用絕對定位的圖片的樣式：
這時給第二個塊設置絕對定位：position:absolute 然后再設置一個偏移：left:150px;top:40px; （在設置偏移量的時候，我們可以設置負值）這時就變成了下圖所示：
要使用絕對定位時，必須要有2個條件：（口訣：父相子絕）
1、必須給父元素增加定位屬性，一般建議使用position:relative
2、給子元素加絕對定位position:absolute，同時要加方向屬性（指left、right、top、bottom屬性）
綜合上面的示例，總結如下：
- 絕對定位元素脫離正常流(文檔流)，所以元素原來的位置會被其他元素占用。
- 因為絕對定位元素脫離了正常流，和相對元素一樣也會有覆蓋其他元素的情況。
- 絕對定位元素是相對於祖先元素，和相對定位不同，相對定位是相對於元素自己原來的位置。
- 絕對定位元素的祖先元素是設置的position: static，該祖先元素並不作為參考物。
- 絕對定位元素的祖先元素有多個都設置了position: absolute或position: relative ,那么是以最近的一個祖先元素作為參考物，即相對於最近的那一個祖先元素進行移動定位
固定定位：
下面我們在說一下固定定位：將元素放置在瀏覽器窗口的固定位置，拖拽窗口時元素位置不變。
它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。
最終大總結：
- 絕對定位根據父元素為基准點進行定位，它會脫離文檔流，不占用原來位置空間
- 相對定位根據自身為基准點進行定位，離開原位置，但是還是會占用原來位置空間
- 固定定位根據瀏覽器窗口為基准點進行定位，它始終在一個位置，不會移動