Абсолютно позиционированный элемент полностью удаляется из потока документа. Он позиционируется относительно его блока-контейнера, и местоположение его краев определяется с помощью свойств смещения (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;}
<p>
This paragraph does <em>not</em> 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.
</p>
<p class="contain">
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-- <em>that is to say, a boldfaced element that is
absolutely positioned, placed with respect to its containing block (the
paragraph)</em>, it will appear within the element box generated by the
paragraph.
</p>
Элементы b обоих абзацев позиционированы абсолютно. Они отличаются блоком-контейнером, используемым для каждого. Элемент b первого абзаца позиционирован относительно начального блока-контейнера, потому что свойство position всех его элементов-предков было static. Однако для второго абзаца было задано position: relative, поэтому он образует блок-контейнер для своих потомков. Возможно, вы обратили внимание, что во втором абзаце позиционированный элемент перекрывает часть текстового содержимого абзаца. Избежать этого можно, только разместив элемент b вне абзаца (с помощью отрицательного значения свойства right или какого-то другого из свойств смещения) или определив для абзаца отступ, достаточно широкий, чтобы вместить позиционированный элемент. Кроме того, через прозрачный фон элемента b просматривается текст абзаца. Единственная возможность избежать этого – задать фон позиционированного элемента или полностью убрать его из абзаца. Иногда требуется, чтобы начальный блок-контейнер выбирался не агентом пользователя, – тогда роль блока-контейнера для всех его потомков выполняет элемент body. Для этого достаточно объявить:
body {position: relative;}
В подобный документ можно ввести абсолютно позиционированный абзац, как показано ниже, и получить результаты:
<p style="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;
width: 50%; height: auto; background: silver;">...</p>
Теперь абзац расположен в самом начале документа, составляет половину ширины документа и перекрывает несколько первых элементов. Важно отметить, что абсолютно позиционированный элемент также образует блок-контейнер для своих элементов-потомков. Например, можно абсолютно позиционировать элемент и затем абсолютно позиционировать один из его дочерних элементов который был сгенерирован с применением следующих стилей и базовой разметки:
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;}
<div>
<div class="a">absolutely positioned element A
<div class="b">absolutely positioned element B</div>
</div>
containing block
</div>
Помните, что, если документ прокручивается, позиционированные элементы будут прокручиваться вместе с ним. Это справедливо для всех абсолютно позиционированных элементов, которые не являются потомками элементов, позиционированных фиксированно. Причина в том, что в конечном счете элементы позиционированы относительно чего-то, что является частью нормального потока. Так, если блоком-контейнером абсолютно позиционированной таблицы является начальный блок-контейнер, она будет прокручиваться, потому что начальный блок-контейнер – это часть нормального потока. Аналогично, даже если заданы четыре уровня вложенности абсолютно позиционированных элементов, самый внешний из этих элементов позиционирован относительно начального блока-контейнера. Поэтому он будет прокручиваться вместе с начальным блоком контейнером, и все его потомки вместе с ним. Если вы хотите позиционировать элементы так, чтобы они размещались относительно окна просмотра и не прокручивались вместе с остальным документом, читайте дальше. Об этом рассказывается в разделе, посвященном фиксированному позиционированию.