Относительно чего будет позиционироваться position: relative, если нет родителя

position: relative без родителя

position: relative позиционирует элемент относительно самого себя в нормальном потоке документа. Наличие или отсутствие родителя с position: relative/absolute/fixed не влияет на работу relative позиционирования.

Как работает relative

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

Элемент сначала занимает свое место в нормальном потоке документа, а потом смещается на указанные значения (top, left, right, bottom) относительно этого места.

<div class="box">Я смещен на 20px вниз и 10px вправо</div>

.box {
  position: relative;
  top: 20px;
  left: 10px;
  background: blue;
}

Визуально:

• Без свойств top/left: элемент на месте
• С top: 20px; left: 10px;: элемент сместился вниз и вправо, но место в потоке документа остается прежним

Важное отличие от absolute

position: absolute ведет себя совсем иначе - он позиционируется относительно ближайшего родителя с position != static (или relative, absolute, fixed, sticky). Если такого родителя нет, то относительно viewport или body.

/* Контейнер без position: relative */
.container {
  width: 300px;
  height: 300px;
  background: lightgray;
}

/* Этот элемент будет позиционирован относительно body/viewport */
.child {
  position: absolute;
  top: 0;
  left: 0;
}

В этом случае .child прилипнет к левому верхнему углу всего viewport, а не контейнера.

Пример с relative - позиционирует самого себя

<div class="container">
  <!-- Контейнер БЕЗ position: relative -->
  <div class="box">Элемент с relative</div>
</div>

.container {
  width: 300px;
  height: 300px;
  background: lightgray;
  /* position не задан, это static */
}

.box {
  position: relative;
  top: 50px;
  left: 50px;
  background: blue;
  color: white;
}

Что происходит:

1. .box занимает место в нормальном потоке (в контейнере)
2. Потом смещается на 50px вниз и 50px вправо от своего нормального положения
3. Место, которое он занимал в потоке, остается пустым

Важное свойство relative: создает контекст позиционирования

Хотя position: relative позиционирует самого себя, он создает новый контекст позиционирования для дочерних элементов с position: absolute.

<div class="container">
  <div class="box">relative элемент</div>
  <div class="absolute-child">absolute дочерний элемент</div>
</div>

.container {
  width: 300px;
  height: 300px;
  background: lightgray;
  position: relative; /* Создает контекст позиционирования */
}

.box {
  position: relative;
  top: 50px;
  background: blue;
}

.absolute-child {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
}

Теперь .absolute-child будет позиционирован относительно .container, потому что .container имеет position: relative.

Сравнение: relative, absolute, static, fixed

/* static (по умолчанию) */
.static {
  position: static; /* top, left, right, bottom игнорируются */
}

/* relative - смещение относительно себя */
.relative {
  position: relative;
  top: 20px; /* смещение от своего нормального положения */
  left: 10px;
}

/* absolute - смещение относительно ближайшего родителя */
.absolute {
  position: absolute;
  top: 50px; /* смещение от родителя с position != static */
  left: 50px;
}

/* fixed - смещение относительно viewport */
.fixed {
  position: fixed;
  top: 0; /* всегда прилипает к верхней части экрана */
  left: 0;
}

Реальный пример: tooltip

<div class="tooltip-container">
  <button>Наведи на меня</button>
  <div class="tooltip">Подсказка</div>
</div>

.tooltip-container {
  position: relative; /* Контекст позиционирования для tooltip */
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 125%; /* На 125% выше контейнера */
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%; /* Стрелка внизу tooltip */
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: black;
}

Частая ошибка: забывают position: relative на родителя

/* НЕПРАВИЛЬНО - tooltip прилипнет к viewport, не к кнопке */
.button {
  /* position не задан */
}

.tooltip {
  position: absolute; /* Будет позиционирован относительно body */
  top: 0;
  left: 0;
}

/* ПРАВИЛЬНО */
.button {
  position: relative; /* Теперь это контекст позиционирования */
}

.tooltip {
  position: absolute; /* Будет позиционирован относительно .button */
  bottom: 125%;
  left: 50%;
}

Тестирование в DevTools

1. Откройте DevTools -> Elements
2. Выберите элемент с position: relative
3. В Computed styles вы увидите position: relative
4. Если есть top/left/right/bottom, вы увидите смещение

Итоги

• position: relative позиционирует элемент относительно самого себя в нормальном потоке
• Наличие родителя с position: relative не влияет на работу relative позиционирования
• Ключевое отличие: relative не удаляет элемент из потока документа - место остается
• Важный побочный эффект: relative создает контекст позиционирования для дочерних absolute элементов
• position: absolute работает совсем иначе - позиционируется относительно ближайшего родителя с position != static
• Для tooltip, dropdown и других всплывающих элементов всегда ставьте position: relative на родителя