Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

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

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

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу, нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Изображение Тото

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