爲什麼利潤率對於絕對/相對位置表現相同

Question

我看到top/left屬性顯示絕對位置和相對位置的差異。

當我設置邊緣位置：相對它根據容器正確定位。但當我設置margin-top位置：absolute時，我認爲它應該根據BODY元素進行定位，但它的位置與position：relative相對於包含元素（#container）相同。而且我還沒有設置任何非靜態元素。

這裏是代碼的位置是：相對 http://jsfiddle.net/uFta4/

這裏是位置：絕對 http://jsfiddle.net/uFta4/2/

請注意，#firstDiv位於同一位置，其相對於#container的。

它是否應該相對於BODY元素？

Answer 1

它是因爲RP元素和AP元素之間存在差異，因爲RP元素會「崩潰」它們的邊緣，而AP元素不會摺疊它們的邊緣。這就是爲什麼你看到AP元素在相同的位置，因爲它也計算你在其標籤中給出的BODY保證金。

爲了讓你更好地理解我已經把幾個代碼。 觀察以下變化並觀察RP和AP元素的不同行爲邊緣塌陷。 RP

1. RP元件餘量崩潰http://jsfiddle.net/uFta4/6/
2. AP元件邊距被添加http://jsfiddle.net/uFta4/7/
3. 具有添加-ve餘量AP元素（成爲-20px）http://jsfiddle.net/uFta4/9/
4. RP元件與-ve餘量崩潰（沒有按't變成-30px）http://jsfiddle.net/uFta4/10/

我希望現在能清楚地告訴你。

Answer 2

對於position:absolute和position:relative，邊距應該表現相同。

在第一個例子中，相對定位的元素沒有設置位置值，所以沒有效果。

在第二個例子中，絕對定位的元素沒有設置位置值，所以它位於主體的左上角。從頂部算起60px，佔用身體20px的邊距和元素本身的40px邊距。

而且，從the specification引述...的絕對定位框

頁邊距不折疊（甚至與他們的流動兒童）。