что содержит блок абсолютно позиционированного элемента?

Question

что такое содержащий блок абсолютно позиционированного элемента? кажется, что правило может быть немного сложным ...

спецификация должна быть здесь: http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Я хочу проверить, верно ли следующее:

для простоты предположим, что содержащийся блок является элементом блока (не встроенным элементом) ...

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

2) если такого предка нет, то область просмотра является содержащим блоком, и поэтому элемент с абсолютным позиционированием относится к области просмотра.

независимо от того, какой блок содержит выше, ширина: 100% или n% и высота: 100% или n% оба относятся к содержащему блоку.

Вот почему

<div style="position:absolute;width:100%;height:100%;background:green"></div>

прямо под точно закроет весь видовой экран - не больше, не меньше.

мы могли бы также использовать position: fixed, за исключением того, что IE 6 не поддерживает это ... и поэтому бедному программисту нужно использовать position: absolute вместо ... (ну, не так уж и сложно)

Это точное описание элемента с абсолютным позиционированием? Если так, то я думаю, что IE 6 и выше, FF, Safari, Chrome все точно следуют этому поведению?

Answer 1

Резюме:

position: relative

Ничего не делает, кроме как установить контекст позиционирования для всех элементов , содержащихся в нем . Затем вы можете position: absolute любой элемент, который он содержит, установив (обычно одно или два) значения из возможных top, right, bottom или left.

Если вы дадите элемент со значением position: relative a top, right, bottom или left, он соответственно сместит позицию, но оставит пробел там, где он будет по умолчанию. Другими словами, он остается в пределах потока документов , но смещается.

position: absolute

Чтобы позиционировать что-либо абсолютно, вам нужно задать ' абсолютно , но относительно , к которому относится элемент '? Это будет либо полное тело (по умолчанию), либо какой-либо другой элемент на странице, который уже расположен (обычно с relative или absolute - fixed также полезно и поддерживается в IE 7, но посмотрите это ошибка ). Затем он извлекается из потока документов - под ним могут появляться другие элементы, но они не будут обтекать его. Если он появляется за другим элементом, вам нужно установить свойство z-index , чтобы переместить его вперед.

Распространенным решением является наличие центрированного контейнера (margin: 0 auto) с position: relative, внутри которого другие элементы помещаются с position: absolute.

Наконец, мне нравится эта небольшая интерактивная демонстрация позиционирования CSS .

Answer 2

Вы правы. Содержащий блок является последним позиционированным элементом. так что если вы хотите явно установить контейнер, тогда укажите ему position: относительный. Большинство браузеров понимают это правильно. У CSS на самом деле нет «окна просмотра», я думаю, что верх - это элемент HTML, но не удерживайте меня на этом IE до 7 имел неназванный элемент выше HTML.