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

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

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

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

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

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

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

Хекслет

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