Принцип работы отрицательных полей CSS ⇐ Html

[Anonymous]

Я хочу понять, как отрицательные поля CSS работают в блочной модели, но мне сложно следовать официальной документации. Ниже я привожу пример, чтобы проиллюстрировать свое замешательство.
Почему отрицательные поля могут привести к перекрытию элементов? Может ли кто-нибудь помочь объяснить это?

Код: Выделить всё

.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;
}

Код: Выделить всё

element A
element B

Подробнее здесь: https://stackoverflow.com/questions/798 ... ve-margins