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

Одним из частых видов позиционирования является относительное позиционирование. Главный вопрос, который может возникнуть с самого начала: "Относительно чего будет позиционироваться элемент?". Ответ достаточно простой: относительно своей изначальной позиции. Элемент остаётся в потоке документа и его места не стараются занять другие элементы.

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

При наведении на элемент (селектор .animate-hover:hover) мы использовали CSS правило position: relative, что означает применение относительного позиционирования для элемента. Управлять расположением можно с помощью четырёх CSS свойств:

  • top
  • right
  • bottom
  • left

Каждое из этих свойств принимает значение, на которое будет "сдвинут" элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств top, right, bottom и left

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

Хекслет

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