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