Если видео недоступно для просмотра, попробуйте выключить блокировщик рекламы.

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

Для того, чтобы установить элементу абсолютное позиционирование, всё также используется свойство 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, то элемент никуда не денется с того места, где он находился изначально. При этом, в виду того, что он больше не участвует в нормальном потоке, его место займут другие элементы и наложатся на него.

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

Хекслет

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