網頁佈局經常用到相對定位和絕對定位，但是有些小夥伴對於相對定位和絕對定位還不是很瞭解，今天小編我就來給大家深入分析分析。
操作方法
（01）如圖，書寫兩個div，一個div裏面包含有另一個div，並且分別給它們添加一個類。
（02）然後我們使用*來清除所有元素的margin和padding。
（03）然後我們先來設置rone這個類，這裏我就設置成紅顏色，並且距離瀏覽器頂部200像素。
（04）保存預覽，可以看到，帶有rone類的div變成了紅顏色，並且它距離瀏覽器頂部有一定的距離哦。
（05）接着設置rtwo類的屬性，這裏我就設置成藍色，與紅色區別開來。
（06）如圖，可以看到紅顏色的div裏面包含有藍顏色的div,在沒有特殊定位下，它們位置如圖所示。
（07）接着我們把rtwo的position屬性設置爲relative（相對定位），然後設置left和top的值，表示往右和往下偏移20px。
（08）接着看看設置相對定位之後的位置變化，可以看到，藍色的div偏移了，並且是相對它自己原來的位置。也就是說，相對定位是相對自己原來的位置來進行定位的。
（09）接着我們再去修改rtwo的position，把它改爲absolute，看看會發生什麼狀況。
（10）如圖，藍色div設置絕對定位之後，會跑出紅色div的範圍，變成以網頁的左上角爲標準，進行定位，而不是以自己的位置爲標準進行定位。
（11）接着我們來設置rone的position屬性爲absolute或者relative，這裏我就設置absolute了。
（12）然後，再來看看定位效果，可以看到，藍色div又跑回紅色div裏面了。這裏，我們先稱紅色div爲父盒子，藍色div爲子盒子。在兩者都沒有特殊定位下，父盒子包含子盒子。當子盒子相對定位，父盒子沒有定位，則子盒子相對自己原來的位置偏移。當子盒子絕對定位，父盒子沒有定位，則子盒子以網頁左上角進行偏移。當子盒子相對定位，父盒子絕對定位/相對定位，則子盒子相對自己原來的位置進行定位。當子盒子絕對定位，父盒子絕對定位/相對定位，則子盒子基於父盒子左上角定位。
特別提示
最後一個步驟的總結很重要，大家仔細閱讀，操作，就可以理解了。
