Das Funktionsprinzip der CSS-negativen Ränder ⇐ CSS

[Anonymous]

Ich möchte wissen, wie negative CSS-Ränder bei Box-Modellen funktionieren, aber die offizielle Website-Dokumentation ist schwer zu verstehen. Im Folgenden werde ich meine Verwirrung anhand eines Beispiels verdeutlichen. Warum können negative Ränder dazu führen, dass sich Elemente überlappen? Kann mir jemand helfen, es zu erklären? Vielen Dank.

Code: Select all

Document


element A
element B

.element1{
height: 200px;
background-color: aqua;
line-height: 200px;
font-size: 50px;
text-align: center;
color:aliceblue;
margin-bottom: -140px;

}
.element2{
height: 100px;
background-color: blueviolet;
line-height: 100px;
font-size: 30px;
text-align: center;
color:aliceblue;
margin-top: -40px;
}

Geben Sie hier eine Bildbeschreibung ein