relative и absolute

Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).

Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента

Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.

Пример 1. Использование position

Результат данного примера показан на рис. 2.

Рис. 2. Положение вложенного элемента относительно родителя

Для родителя допустимо указывать значение relative, absolute, fixed или sticky. Если у дочернего элемента свойство position задано как absolute, то отсчёт координат ведётся от родителя. В примере 2 показано сочетание абсолютного позиционирования для размещения даты в левом верхнем углу фотографии.

Пример 2. Использование absolute

Результат данного примера показан на рис. 3.

Рис. 3. Вывод даты в левом верхнем углу

Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.

Пример 3. Создание всплывающей подсказки

Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip). Остальной код CSS используется для оформления этого текста (рис. 4).

Рис. 4. Вид всплывающей подсказки