正確區分relative 和 absolute

2021-08-01 14:54:33 字數 1451 閱讀 1317

//小紅relativ , 大綠absolute ,( relative:r ,   absolute:a )

並列情況:

1.小紅r,大綠a,r——a,(無任何top,left值:紅綠上下排列,不會重疊;大綠設定top,left值:大綠會上移,覆蓋小紅

根據設定的值來看具體覆蓋多少;小紅設定top,left值,會移動,在大綠下面;即只要設定top,left值,不論給紅還是綠設定

,紅的都會在綠的下面)

2.小紅r,大綠a,a--r,(無任何top,left值,紅色在綠色上面;綠色設定top:綠色上下動,紅色不動,還是紅色在上面,

紅色設定top,紅色上下動,綠色不動,紅的還是在綠色上面,即只要設定top,left值,不論給紅還是綠設定

,紅的都會在綠的上面)

3.小紅a,大綠r,r——a,(無任何top,left值,綠紅上下排列,不會重疊;紅色設定top,會上下動,但是會在綠色上面動;

綠色設定top,會上下動,在紅色下面動,不論給紅還是綠設定,紅的都會在綠的上面)

4.小紅a,大綠r,a--r,(無任何top,left值,綠色會覆蓋紅色;給哪個設定top,綠色都在紅色上面)

包含情況

1.小紅a,大綠r,a包含r,(無任何top,left值,綠色會覆蓋紅色;給哪個設定top,綠色都在紅色上面,top值大於紅色

寬度,才會看到兩者分開)

2.小紅a,大綠r,r包含a,(無任何top,left值,紅色在綠色上面;給綠色設定top:紅綠會一起移動;給紅色設定top:只有

紅色動,綠色不動)

3.小紅r,大綠a,a包含r,(無任何top,left值,紅色在綠色上面;給綠色設定top:紅綠會一起移動;給紅色設定top:只有

紅色動,綠色不動)

4.小紅r,大綠a,r包含a,(無任何top,left值,綠色在紅色上面;給綠色設定top:綠色會移動,紅色不動;給紅色設定top:

紅色動,綠色不動)

大體總結:

一.兩個元素是並列關係:

1.相對定位和絕對定位都是脫離了文件流,相對定位佔位置,絕對定位不佔位置,

2.如果先載入相對定位的元素,後載入絕對定位元素,那麼相對定位元素會佔乙個位置,前提是他們都不設定top和left值)

3.如果先載入的是絕對定位,後載入的是相對定位,那麼兩個元素會疊加在一起,而且會疊加到先載入的那個元素上

4.如果兩者都是絕對定位,那麼他們會疊在一起,後面載入的部位會疊在前面載入的元素上。

5.如果兩者都是相對定位,那麼他們按後面載入的順序,上下排列,不會重疊。

二.兩個元素是包含關係:

1.裡面的元素是絕對定位,只要外面的元素設定了position,無論是relative還是absolute,裡面的元素都會相對於

外面的元素移動(改變top,left值)

2兩者只要是包含的關係,外面的元素動,裡面的元素一定會一起跟著動;裡面的元素動的話,可以移動到外面元素的外邊,

此時不用考慮這兩者的定位型別

Postman正確區分引數的幾種型別

沒有有body的方法 get,copy,head,purge,unlock.我們在使用post,put,patch,delete,options,link,unlink,lock,propfind,view 方法的時候,他們都有方法體body,用來儲存資料.而body的型別可以有 form data...

如何正確區分軟體成本估算中的邏輯資料與物理資料?

我們在進行軟體專案成本估算時經常容易混淆邏輯資料與物理資料。下面我們談談二者間的區別,以便我們正確的進行軟體成本估算。邏輯資料一般是交易記錄 賬號資訊 客戶資訊等型別的資料。而物理資料是資料庫表 檢視 軟體的頁面 物理檔案 如doc 登錄檔等。乙個物理檔案中可以包含多種邏輯資料,乙個邏輯檔案也可以分...

absoluted定位和relative定位

首先div設定absoluted絕對定位後,div會脫離文件流,因此不佔據空間。與div設定為relative相對定位不同,相對定位實際上被看作普通流定位模型的一部分。絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。根據使用者 的不同,最...