HTML中怎樣區別絕對定位和相對定位呢？

網頁佈局經常用到相對定位和絕對定位，但是有些小夥伴對於相對定位和絕對定位還不是很瞭解，今天小編我就來給大家深入分析分析。

操作方法

（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為子盒子。在兩者都沒有特殊定位下，父盒子包含子盒子。當子盒子相對定位，父盒子沒有定位，則子盒子相對自己原來的位置偏移。當子盒子絕對定位，父盒子沒有定位，則子盒子以網頁左上角進行偏移。當子盒子相對定位，父盒子絕對定位/相對定位，則子盒子相對自己原來的位置進行定位。當子盒子絕對定位，父盒子絕對定位/相對定位，則子盒子基於父盒子左上角定位。

特別提示

最後一個步驟的總結很重要，大家仔細閲讀，操作，就可以理解了。