Почему margin так странно работают?

Question

[avedeku]

Вот у меня есть два объекта с уникальными идентификаторами, также написанными на них. Если я перемещаю объект "first" с помощью margin-top на 10px - у меня двигаются сразу оба объекта. При этом если я таким же образом перемещаю объект "second" на 10px и на -10px - двигается только он, или вовсе залазит на объект "first".

Вот я сдвинул объект "first" с margin-top на 100px.

А вот я сдвинул объект "second" с margin-top, но уже на -50px. Казалось бы, объект "first" вроде должен также отодвинуться, но нет, он остался в том же положении, а "second" вовсе его перекрыл...


Почему объект "first" остался в том-же положении?

Comments

[0xD34F]

3.1, 3.4

[avedeku]

0xD34F, Это предупреждение или вопрос удаляется?

[0xD34F]

Это надо перейти по ссылке, прочитать, что там написано, исправить вопрос.

[Lynn «Кофеман»]

К картинкам надо бы код приложить

Но я на 146% уверен что все ответы есть тут https://developer.mozilla.org/en-US/docs/Web/CSS/C... и тут https://developer.mozilla.org/en-US/docs/Learn/CSS...

[Lynn «Кофеман»]

И тут на русском https://doka.guide/html/flow/

[avedeku]

0xD34F, понял, исправил.

[avedeku]

Lynn «Кофеман»,

[Lynn «Кофеман»]

avedeku, код это буковки, а не картинки.
Желательно в теге code

Впрочем в предыдущих двух комментариях есть все ответы. Начните со второго

[Сергей delphinpro]

Казалось бы, объект "first" вроде должен также отодвинуться, но нет, он остался в том же положении, а "second" вовсе его перекрыл...

Это только вам так кажется, потому что не знакомы с теорией =) На самом деле все логично и правильно.

[imko]

Ну и чего не так, второй же упирается в первый, движение первого двигает второй. При отрицательном у второго первому пофигу он стоит, пишешь расстояние от предыдущего наверх отрицательное - получаешь наложение