Абсолютное позиционирование

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

Для того, чтобы установить элементу абсолютное позиционирование, всё также используется свойство position, только теперь со значением absolute.

<style>
  .absolute {
    position: absolute;
  }
</style>

<div class="absolute">
    <p>Блок с абсолютным позиционированием. Внутри него могут находиться любые элементы и они также будут перемещаться вместе с главным блоком.</p>
</div>

Главной отличительной чертой абсолютного позиционирования является то, что блок как бы "выдёргивается" из потока документа. Для нормального потока больше не существует такого элемента, поэтому место, которое он занимал ранее, освобождается, и его могут занять другие элементы (если, конечно, их ширина и высота позволяют это сделать).

Если элемента не существует в потоке документа, то относительно чего будет позиционироваться элемент? Ответ прост: относительно левого верхнего края окна браузера. Теперь именно эта точка становится началом координат со значениями (0, 0) для нашего элемента, а управление расположением осуществляется с помощью тех же свойств top, right, bottom, left.

Абсолютное позиционирование используется достаточно часто. Оно, например, помогает сконцентрировать внимание пользователя на конкретном элементе. Вспомните различные всплывающие окна на сайтах. Для того, чтобы пользователь чётче видел сообщение, под ним располагается тёмная область, затемняющая весь другой контент сайта.

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

Например, если блоку с абсолютным позиционированием указать значения left и right равным нулю, то блок растянется на всю рабочую ширину браузера, так как должен одновременно находится и в левой крайней точке, и в правой.

Также, если не указать ни одного из доступных значений top, right, bottom, left, то элемент никуда не денется с того места, где он находился изначально. При этом он больше не участвует в нормальном потоке, поэтому его место займут другие элементы и наложатся на него.

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Javascript, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →