Итак, допустим, у нас есть следующий код:

body {
    margin: 0;
    /* position: relative; */
}

.container {
    width: 300px;
    height: 300px;
    margin: 100px;
    background: gray;
}

.absolute {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 10px;
}
<div class="container">
    <div class="absolute"></div>
</div>

В этом случае элемент .absolute позиционируется относительно тела, как и ожидалось.

Не будем добавлять position: relative к телу. Элемент теперь расположен относительно .container. Что не имеет смысла, так как абсолютно позиционированный элемент позиционируется относительно ближайшего позиционный предок (нестатический), который в данном случае является телом.

Позиционирование тела отличается от других элементов?

CODEPEN

1
Rustem Kakimov 20 Мар 2017 в 18:20

2 ответа

Лучший ответ

Из спецификации об абсолютном позиционировании:

Содержащий блок для позиционированного блока устанавливается ближайшим позиционированным предком (или, если его нет, начальный блок, как в нашем примере).

Хорошо, у вас нет ближайших предков, перейдите к начальному содержащий блок:

Положение и размер блока (ов) элемента иногда вычисляются относительно определенного прямоугольника, называемого содержащим блоком элемента. Содержащий блок элемента определяется следующим образом:

  1. Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник, называемый исходный содержащий блок . Для непрерывных носителей он имеет размеры видового экрана и привязан у истоков холста; это область страницы для выгружаемых носителей.

Хорошо, а какой корневой элемент в вашем кейс:

html элемент представляет корень документа HTML.

Это означает, что по умолчанию ваш элемент .absolute расположен не относительно по отношению к <body>, а по <html>.

1
Community 20 Июн 2020 в 09:12

Фактически, если вы не укажете position: относительный, то элементы будут иметь позицию: static (https://www.w3schools.com/cssref/pr_class_position.asp). На самом деле вам нужно вставить позицию относительно элемента .container, если вы хотите разместить .absolute в зависимости от элемента контейнера. Вот почему у вас странное поведение.

0
Manuel Cheța 20 Мар 2017 в 15:53