Является ли контекст размещения абсолютно позиционированного элемента по умолчанию элемент body?

992b171dfda541a2b80565da566ae19d.pngНе согласна со следующим утверждением в книге:
контекстное расположение означает, что при смещении элемента с помощью св-в left right top bottom мы двигаем его относительно другого элемента, который называется контекст расположения. По умолчанию контекстом размещения всегда будет body.[1]

- Если проверить это утверждение на практике, то как видно на картинке (рис.1) абсолютно позиционированный блок имеет своим контекстом размещения окно браузера,
а не элемент body (обозначен серой рамкой).

Может я что-то не понимаю.
Как Вы думаете, что автор, высказывая это утверждение, имел ввиду?

Вот ссылка на книгу:
[1]Чарлх Уайт Смит “cтильный сайт с помощью css”
  • Вопрос задан
  • 409 просмотров
Решения вопроса 1
lazalu68
@lazalu68
Salmon
На самом деле Филатов всё уже доступно объяснил: в соответствии с принципами позиционирования (barelyfitz, MDN), у абсолютно позиционированного элемента контекстом расположения является ближайший родитель с позиционированием отличным от статичного. К тому же в вашем случае фраза "абсолютно позиционированный блок имеет своим контекстом размещения окно браузера" как раз и означает, что контекстом является body. Это вот такая вот неудобоваримая условность, связанная с body.

Каждому отображаемому элементу DOM соответствует какой-то блок в макете. Элемент body является исключением: вы можете позиционировать соответствующий ему блок и это будет влиять на дочерние элементы, но некоторые его стилевые свойства будут применяться ко всему окну. Так происходит потому что body является не/посредственным контекстом расположения для всех отображаемых на странице элементов, он является корневым, то есть как бы и представляет собой окно.

Заметьте, что пример на MDN аналогичен вашему, и вот что они пишут:
In the example below, a positioned ancestor doesn't exist and box ... is positioned absolutely relative to the immediate ancestor (the <body> of the iframe here)


То есть у них происходит то же самое: абсолютно позиционированный элемент располагается в контексте окна, а не в контексте блока соответствующего body, но они всё равно говорят что "блок позиционирован относительно body". Стоит считать это условностью: хоть body и представляет собой окно, но он всё же является элементом DOM, а поэтому в макете для него обязан существовать соответствующий блок. Такая вот двоякая сущность. Не очень понятно, конечно, но, возможно, так сложилось исторически, я не смог откопать ничего по теме.

В любом случае, это самый незначительный из сюрпризов которые может выкинуть CSS, например невозможность отрезать overflow только по одной оси - это покруче будет.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@FilatovNikita
Если вы указываете position: absolute элемент всегда будет выходить из потока и двигаться относительно body, но если у вас есть родительский элемент, в котором указан position relative и вы его ребенка позиционируете абсолютом, то он будет смещаться относительно родителя
Ответ написан
Комментировать
Exploding
@Exploding
wtf?
Там еще есть разница если у родителя position: static или relative
И у вас что-то видимо случилось неведомое, т.к. по-умолчанию body не имеет внешних отступов (margin).
UPD: А нет, все нормально. Имеет!))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы