Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML документа может быть размещён вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML документа.

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

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

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

  • top
  • right
  • bottom
  • left

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

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

Хекслет

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