Почему абсолютно позиционированный элемент накладывается на один и тот же элемент? Как это убрать?

Question

Первый элемент абсолютно позиционированный, второй – нет. Я задаю второму элементу верхний марджин, который равен высоте абсолютно позиционированного элемента для того, чтобы "обычный" элемент поместить под абсолютно позиционированным. Но вместо того, чтобы остаться вверху, абсолютно позиционированный элемент сдвигается вместе с "обычным" элементом.

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 500px;
  height: 500px;
  background: rgba(4, 127, 214, .3);
  position: absolute;
}

.block_2 {
  margin-top: 500px;
  width: 500px;
  height: 500px;
  background: red;
}

<div class="block"></div>
<div class="block_2"></div>

Почему так происходит?

Answer 1

Необходимо просто добавить position: absolute; ко второму блоку тоже

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 500px;
  height: 500px;
  background: rgba(4, 127, 214, .3);
  position: absolute;
}

.block_2 {
  margin-top: 500px;
  width: 500px;
  height: 500px;
  background: red;
  position: absolute;
}

<div class="block"></div>
<div class="block_2"></div>

Answer 2

В случае, если у абсолютно позиционированного элемента не указаны свойства top, left, right, bottom - его позиция остается такой же как если бы было указано position:static.

В данном случае: свойства не указаны, поэтому позиция в верхнем углу тега body.

Проблема в вопросе заключается в том, что вертикальные margin могут схлопываться, что и происходит в данном случае.

То есть, отступ для элемента block_2 схлопывается с отступом body и вниз сдвигается сам элемент body, и, как следствие, абсолютно позиционированный элемент без заданной позиции.

Поэтому для решения достаточно задать координаты, например top:0

* {
  margin: 0;
  padding: 0;
}

.block {
  width: 500px;
  height: 500px;
  background: rgba(4, 127, 214, .3);
  position: absolute;
  top: 0;
}

.block_2 {
  margin-top: 500px;
  width: 500px;
  height: 500px;
  background: red;
}

<div class="block"></div>
<div class="block_2"></div>

БЛОГ НА HUSL

Почему абсолютно позиционированный элемент накладывается на один и тот же элемент? Как это убрать?

Ответы (2 шт):