Блоки-контейнеры и абсолютно позиционированные элементы

Абсолютно позиционированный элемент полностью удаляется из потока документа. Он позиционируется относительно его блока-контейнера, и местоположение его краев определяется с помощью свойств смещения (top, left и др.). Позиционированный элемент не обтекает содержимое других элементов, а их содержимое не обтекает позиционированный элемент. Это означает, что абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими. Блок-контейнер абсолютно позиционированного элемента – это ближайший элементпредок, значение свойства position которого отлично от static. Обычно автор выбирает элемент, который будет выступать в роли блока-контейнера абсолютно позиционированного элемента, и задает для его свойства position значение relative без смещений:

p.contain {position: relative;}

Иллюстрирующий действие следующей разметки:

p {margin: 2em;}
p.contain {position: relative;} /* определяет блок-контейнер */
b {position: absolute; top: auto; right: 0; bottom: 0; left: auto;
width: 8em; height: 5em; border: 1px solid gray;}


This paragraph does not establish a containing block for any of its
descendant elements that are absolutely positioned.


Therefore, the
absolutely positioned boldface element it contains will be positioned
with respect to the initial containing block.


Thanks to 'position: relative', this paragraph establishes a containing block
for any of its descendant elements that are absolutely positioned. Since
there is such an element-- that is to say, a boldfaced element that is
absolutely positioned,
placed with respect to its containing block (the
paragraph)
, it will appear within the element box generated by the
paragraph.




Элементы b обоих абзацев позиционированы абсолютно. Они отличаются блоком-контейнером, используемым для каждого. Элемент b первого абзаца позиционирован относительно начального блока-контейнера, потому что свойство position всех его элементов-предков было static. Однако для второго абзаца было задано position: relative, поэтому он образует блок-контейнер для своих потомков. Возможно, вы обратили внимание, что во втором абзаце позиционированный элемент перекрывает часть текстового содержимого абзаца. Избежать этого можно, только разместив элемент b вне абзаца (с помощью отрицательного значения свойства right или какого-то другого из свойств смещения) или определив для абзаца отступ, достаточно широкий, чтобы вместить позиционированный элемент.


Кроме того, через прозрачный фон элемента b просматривается текст абзаца. Единственная возможность избежать этого – задать фон позиционированного элемента или полностью убрать его из абзаца. Иногда требуется, чтобы начальный блок-контейнер выбирался не агентом пользователя, – тогда роль блока-контейнера для всех его потомков выполняет элемент body. Для этого достаточно объявить:

body {position: relative;}

В подобный документ можно ввести абсолютно позиционированный абзац, как показано ниже, и получить результаты:

...



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

div {position: relative; width: 100%; height: 10em;
border: 1px solid; background: #EEE;}
div.a {position: absolute; top: 0; right: 0; width: 15em; height: 100%;
margin-left: auto; background: #CCC;}
div.b {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;
margintop: auto; background: #AAA;}

absolutely positioned element A
absolutely positioned element B


containing block


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


Это справедливо для всех абсолютно позиционированных элементов, которые не являются потомками элементов, позиционированных фиксированно. Причина в том, что в конечном счете элементы позиционированы относительно чего-то, что является частью нормального потока. Так, если блоком-контейнером абсолютно позиционированной таблицы является начальный блок-контейнер, она будет прокручиваться, потому что начальный блок-контейнер – это часть нормального потока. Аналогично, даже если заданы четыре уровня вложенности абсолютно позиционированных элементов, самый внешний из этих элементов позиционирован относительно начального блока-контейнера. Поэтому он будет прокручиваться вместе с начальным блоком контейнером, и все его потомки вместе с ним. Если вы хотите позиционировать элементы так, чтобы они размещались относительно окна просмотра и не прокручивались вместе с остальным документом, читайте дальше. Об этом рассказывается в разделе, посвященном фиксированному позиционированию..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Видимость элементов
Задание ширины и высоты
Запрет на обтекание
Запрет перемещения