Следующим важным типом позиционирования является абсолютное позиционирование. Оно может выглядеть запутаннее, чем относительное, но при небольшой практике вы легко усвоите все нюансы работы с ним.
Для того, чтобы установить элементу абсолютное позиционирование, все так же используется свойство 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, то элемент никуда не денется с того места, где он находился изначально. При этом он больше не участвует в нормальном потоке, поэтому его место займут другие элементы и наложатся на него.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
