Позиционирование Relative в CSS

Position relative - это одно из значений свойства position в CSS, которое делает элемент относительно себя позиционируемым. Это означает, что все следующие свойства позиционирования (top, bottom, left и right) будут применяться к этому элементу, но не будут влиять на его позицию в потоке документа.

С помощью position relative вы можете переместить элемент на определенное расстояние от его изначальной позиции, не оказывая влияния на другие элементы на странице. Например, вы можете использовать это свойство для создания эффекта наведения на ссылку, когда при наведении на нее появляется всплывающая подсказка, расположенная рядом с ссылкой, но без изменения самой ссылки.

Пример:

HTML:

Ссылка

CSS:

.link {
  position: relative;
}
.link:hover:before {
  content: "Всплывающая подсказка";
  position: absolute;
  top: -20px;
  left: 0;
}

В этом примере мы использовали position relative на элементе ссылки (link). Затем мы добавили псевдоэлемент :before с помощью псевдо-свойства content, которое добавляет текст в блок :before. Затем мы задали позиционирование псевдоэлемента с помощью position absolute и переместили его на -20px сверху и на 0 слева относительно элемента ссылки.

Таким образом, при наведении курсора на ссылку появляется всплывающая подсказка, которая находится рядом с ссылкой, но без изменения позиции самой ссылки в потоке документа.