網頁佈局經常用到相對定位和絕對定位,但是有些小夥伴對於相對定位和絕對定位還不是很瞭解,今天小編我就來給大家深入分析分析。
(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為子盒子。在兩者都沒有特殊定位下,父盒子包含子盒子。當子盒子相對定位,父盒子沒有定位,則子盒子相對自己原來的位置偏移。當子盒子絕對定位,父盒子沒有定位,則子盒子以網頁左上角進行偏移。當子盒子相對定位,父盒子絕對定位/相對定位,則子盒子相對自己原來的位置進行定位。當子盒子絕對定位,父盒子絕對定位/相對定位,則子盒子基於父盒子左上角定位。
最後一個步驟的總結很重要,大家仔細閲讀,操作,就可以理解了。