css相對元素中的靜態元素

Question

我是新來的css。
我對位置「靜態」和「相對」有一些疑問。 當「靜態」元素放置在「相對」元素中時，邊緣屬性如何工作？
代碼如下。

img { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: -1; 
 
} 
 

 
.top{ 
 
    margin-top:20px; 
 
    padding:20px; 
 
} 
 
    
 
.back{ 
 
    background-color:#eee; 
 
    position:relative; 
 
}

<div class="back"> 
 
    <div class="top">Top text </div> 
 
</div>

我的問題是， 「頂」 格有邊距爲20px。
「後退」div是「相對的」，沒有餘量。
但是爲什麼「back」div的margin與「top」div相同？

---

Answer 1

你看到的是「保證金崩潰」 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

家長和第一/最後一個子 - 如果沒有邊框，填充，內嵌的內容，block_formatting_context創建或間隙分離從其第一個子塊的邊界頂部開始的一個塊的邊界頂部，或者沒有邊界，填充，內聯內容，高度，最小高度或最大高度以將塊的邊界底部與邊界相隔開，最後一個孩子的底部，那麼這些利潤率就會崩潰。摺疊後的保證金最終在家長之外。