В чем разница между CSS-свойствами position: absolute, position: fixed и position: relative?

Разница между position: absolute, fixed и relative

Свойство position в CSS определяет, как браузер позиционирует элемент на странице. Три основных значения имеют принципиально разное поведение.

position: relative

Относительное позиционирование позиционирует элемент относительно его обычного места в документе.

Особенности:

• Элемент занимает свое место в потоке документа
• Сдвигается от этого места с помощью top, bottom, left, right
• Не влияет на позицию других элементов
• Часто используется как контекст позиционирования для вложенных absolutely positioned элементов

<div class="container">
  <div class="box relative-box">
    Я сдвинут на 20px вверх и 30px вправо
  </div>
  <div class="box">Мое место не изменилось</div>
</div>

.relative-box {
  position: relative;
  top: -20px;  /* сдвиг вверх на 20px */
  left: 30px;  /* сдвиг вправо на 30px */
}

position: absolute

Абсолютное позиционирование позиционирует элемент относительно ближайшего позиционированного родителя (или относительно body, если такого нет).

Особенности:

• Элемент удаляется из потока документа
• Его место в потоке занимают другие элементы
• Использует top, bottom, left, right для позиционирования
• Требует наличие относительно позиционированного родителя

<div class="container relative">
  <div class="box absolute-box">
    Я позиционирован относительно .container
  </div>
  <div class="box">Я сдвинулся вверх, заняв место абсолютного элемента</div>
</div>

.relative {
  position: relative;  /* устанавливаем контекст позиционирования */
}

.absolute-box {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 200px;
}

position: fixed

Фиксированное позиционирование позиционирует элемент относительно окна браузера (viewport).

Особенности:

• Элемент удаляется из потока документа
• Остается на месте даже при прокрутке страницы
• Позиционируется относительно viewport, не родителя
• Часто используется для sticky header'ов, модальных окон, уведомлений

<div class="fixed-header">Я остаюсь на месте при прокрутке</div>
<main>Основной контент</main>

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;  /* растягиваем на всю ширину */
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;  /* поднимаем над другими элементами */
}

Сравнительная таблица

Практические примеры

Sticky header (fixed)

<header class="header">Навигация</header>
<main>
  <section>Много контента</section>
  <section>Еще контент</section>
</main>

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  z-index: 999;
}

main {
  margin-top: 60px;  /* отступ под фиксированный header */
}

Модальное окно (absolute + fixed overlay)

<div class="modal-overlay">
  <div class="modal-dialog">
    <h2>Подтверждение</h2>
    <p>Вы уверены?</p>
    <button class="btn-cancel">Отмена</button>
    <button class="btn-confirm">Подтвердить</button>
  </div>
</div>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-dialog {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

Выпадающее меню (relative + absolute)

<div class="dropdown relative">
  <button class="dropdown-toggle">Меню</button>
  <ul class="dropdown-menu">
    <li><a href="#">Опция 1</a></li>
    <li><a href="#">Опция 2</a></li>
    <li><a href="#">Опция 3</a></li>
  </ul>
</div>

.dropdown.relative {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;  /* сразу под кнопкой */
  left: 0;
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 200px;
  display: none;  /* скрыто по умолчанию */
}

.dropdown:hover .dropdown-menu {
  display: block;  /* показываем при наведении на родителя */
}

Бейдж на товаре (absolute в relative)

<div class="product-card relative">
  <img src="product.jpg" alt="Товар">
  <div class="discount-badge">-50%</div>
</div>

.product-card.relative {
  position: relative;
  width: 200px;
}

.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
}

Floating button (fixed)

<button class="floating-action-button">
  <span>+</span>
</button>

.floating-action-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #007bff;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 500;
}

.floating-action-button:hover {
  background: #0056b3;
}

Важные замечания

z-index работает только с позиционированными элементами (relative, absolute, fixed):

.static-element {
  position: static;  /* по умолчанию */
  z-index: 10;      /* не сработает! */
}

.positioned-element {
  position: relative;
  z-index: 10;      /* работает */
}

Контекст позиционирования (Stacking Context)

Элемент с position: absolute ищет ближайшего позиционированного родителя:

<div class="grandparent">        <!-- position: static -->
  <div class="parent relative">  <!-- position: relative -->
    <div class="child absolute"> <!-- position: absolute - позиционируется относительно .parent -->
    </div>
  </div>
</div>

Когда что использовать

• relative - для небольших смещений элементов, создания контекста позиционирования
• absolute - для выпадающих меню, подсказок, бейджей, элементов внутри контейнера
• fixed - для sticky header'ов, модальных окон, floating button'ов, уведомлений

Выбор правильного значения position критичен для создания правильного макета и поведения компонентов.