css position statisches element im relativen element

Question

ich bin neu in css.
Ich habe einige Fragen über die Position "statisch" und "relativ". Wenn das "statische" Element in das "relative" platziert, wie funktioniert die Margin-Eigenschaft?
Der Code folgt.

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>

Meine Frage ist, dass "oben" div die margin-top 20px hat.
Die "zurück" Div ist "relativ" und hat keine Marge.
Aber warum hat "zurück" div den gleichen Rand wie der "top" div?

---

Answer 1

Was Sie sehen, ist "margin Zusammenbruch" https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Eltern und erste/letzte Kind - Wenn es keine Grenze, Polsterung, Inline-Inhalt, block_formatting_context erstellt oder Spiel zu trennen der obere Rand eines Blocks vom oberen Rand des ersten untergeordneten Blocks oder kein Rahmen, Abstand, Inline-Inhalt, Höhe, minimale Höhe oder maximale Höhe, um den unteren Rand eines Blocks vom Rand zu trennen. Bottom des letzten Kindes, dann fallen diese Ränder zusammen. Der reduzierte Rand endet außerhalb des übergeordneten Elements.