Относительное и абсолютное позиционирование — CSS: Позиционирование элементов

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

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

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

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

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

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

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

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

Нашли опечатку или неточность?

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

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

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

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

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

Для полного доступа к курсу нужен базовый план

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

Получить доступ

130

курсов

900

упражнений

2000+

часов теории

3200

тестов