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

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

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

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

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

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

В уроке про абсолютное позиционирование было сказано о том, что элемент позиционируется относительно угла браузера. Такое поведение не всегда удобно и тому есть несколько причин:

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

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

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

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


<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

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

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

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