Как позиционируется элемент со свойством relative?

position: relative — как работает

position: relative позиционирует элемент относительно его нормального положения в потоке документа. Элемент остаётся в потоке (занимает место), но смещается относительно себя.

Ключевые характеристики

1. Остаётся в потоке документа — занимает исходное место
2. Смещается относительно себя — используя top, right, bottom, left
3. Может перекрывать другие элементы — через z-index
4. Новый stacking context — становится контекстом позиционирования для position: absolute потомков

.element {
  position: relative;
  top: 20px;      /* Смещение вниз на 20px от своего нормального места */
  left: 30px;     /* Смещение вправо на 30px */
  z-index: 10;    /* Может быть выше других элементов */
}

Визуально

Нормальный поток (без position: relative):
[Элемент 1]
[Элемент 2] <- займет это место
[Элемент 3]

С position: relative и top: 20px:
[Элемент 1]
                  <- пусто, но место зарезервировано
[Элемент 2]      <- смещен вниз, но "вспомни" своё старое место
[Элемент 3]

Примеры

Простое смещение:

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background: blue;
}

.box.shifted {
  top: 20px;        /* +20px вниз */
  left: -10px;      /* -10px влево */
}

HTML:

<div class="box">Синий ящик</div>
<div class="box shifted">Смещенный синий ящик</div>
<div>Текст остаётся ниже обоих ящиков</div>

Второй ящик будет отрисован вниз и влево, но место для него остаётся занято в потоке.

Использование случаев

1. Микро-смещения иконок и текста

.icon-label {
  display: flex;
  align-items: center;
}

.icon {
  position: relative;
  top: 2px;           /* Небольшое смещение для выравнивания */
  margin-right: 8px;
}

2. Декоративные элементы

.button {
  position: relative;
  padding: 12px 24px;
}

.button::before {
  content: '';
  position: absolute; /* Зависит от position: relative родителя */
  top: -5px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.1);
  border-radius: inherit;
}

Дешифр: position: relative на кнопке создаёт контекст позиционирования для position: absolute ::before.

3. Tooltip или выскакивающее меню

<div class="button-wrapper">
  <button class="button">Наведись</button>
  <div class="tooltip">Подсказка</div>
</div>

.button-wrapper {
  position: relative;  /* Контекст позиционирования */
}

.tooltip {
  position: absolute;
  bottom: 100%;        /* На 100% выше (зависит от relative родителя) */
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.button-wrapper:hover .tooltip {
  display: block;
}

Отличие от других position значений

/* static (по умолчанию) */
.static-box {
  position: static;
  top: 20px;      /* Игнорируется */
}

/* relative — смещается, но занимает место */
.relative-box {
  position: relative;
  top: 20px;      /* Смещен вниз, место занято */
}

/* absolute — вырвано из потока */
.absolute-box {
  position: absolute;
  top: 20px;      /* Позиционировано от ближайшего relative родителя */
  /* Место НЕ занято */
}

/* fixed — привязано к viewport */
.fixed-box {
  position: fixed;
  top: 20px;      /* Позиционировано от окна браузера */
}

Важные моменты

1. z-index работает только с позиционированными элементами

.box {
  position: relative;  /* Нужно для z-index */
  z-index: 10;        /* Работает */
}

.static-box {
  /* position: static (по умолчанию) */
  z-index: 10;        /* НЕ работает */
}

2. position: relative создаёт новый stacking context

<div class="container" style="position: relative; z-index: 1;">
  <div style="position: absolute; z-index: 9999;">
    Даже с z-index: 9999, останется внутри контейнера
  </div>
</div>

<div style="position: relative; z-index: 2;">
  Этот div будет выше контейнера сверху
</div>

3. Процентные значения top/left зависят от размера элемента

.box {
  position: relative;
  width: 100px;
  height: 100px;
  top: 50%;       /* 50% от 100px = 50px */
  left: 50%;      /* 50% от 100px = 50px */
}

Вывод

position: relative используется когда:

• Нужно слегка сместить элемент, но оставить место
• Нужно создать контекст позиционирования для position: absolute потомков
• Нужно использовать z-index без вырывания из потока

Помни: главное отличие от position: absolute — что место всё ещё занято в нормальном потоке документа.