PrepBro
← Назад к вопросам

В чем разница между absolute и relative?

1.7 Middle🔥 121 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

В чем разница между absolute и relative

position: absolute и position: relative — это два из наиболее часто используемых CSS свойств позиционирования. Они имеют кардинально разные поведения, хотя оба влияют на расположение элемента.

position: relative

Relative позиционирование позиционирует элемент ОТНОСИТЕЛЬНО его нормального положения в потоке документа. Элемент остаётся в нормальном потоке, но смещается:

<style>
  .container {
    width: 300px;
    border: 1px solid black;
  }
  
  .relative-box {
    position: relative;
    top: 20px;      /* Смещение на 20px вниз от нормального положения */
    left: 30px;     /* Смещение на 30px вправо от нормального положения */
    background: red;
    width: 100px;
    height: 100px;
  }
</style>

<div class="container">
  <div class="relative-box">Relative</div>
  <!-- Место для элемента ВСЕ ЕЩЕ зарезервировано в потоке! -->
</div>

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

  • Элемент смещается ОТНОСИТЕЛЬНО СВОЕГО ОБЫЧНОГО ПОЛОЖЕНИЯ
  • МЕСТО В ПОТОКЕ ОСТАЁТСЯ ЗАРЕЗЕРВИРОВАНО — элемент не занимает новое место
  • Остальные элементы игнорируют смещение
  • Создаёт новый контекст позиционирования для абсолютно позиционированных потомков
<style>
  .parent {
    position: relative; /* Создаёт контекст позиционирования */
  }
  
  .child {
    position: absolute; /* Будет позиционирован относительно parent */
    top: 0;
    left: 0;
  }
</style>

position: absolute

Absolute позиционирование позиционирует элемент ОТНОСИТЕЛЬНО его ближайшего позиционированного предка (или window, если таких нет). Элемент удаляется из нормального потока:

<style>
  .container {
    position: relative;  /* Создаёт контекст позиционирования */
    width: 300px;
    height: 200px;
    border: 1px solid black;
  }
  
  .absolute-box {
    position: absolute;
    top: 50px;       /* Позиционирование относительно container */
    left: 50px;
    background: blue;
    width: 100px;
    height: 100px;
  }
</style>

<div class="container">
  <div class="absolute-box">Absolute</div>
  <!-- Элемент удалён из потока! Место не зарезервировано -->
</div>

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

  • Элемент УДАЛЯЕТСЯ ИЗ НОРМАЛЬНОГО ПОТОКА ДОКУМЕНТА
  • Позиционируется ОТНОСИТЕЛЬНО ближайшего position не-static предка
  • Если предка нет — позиционируется относительно <html> или viewport
  • МЕСТО В ПОТОКЕ НЕ ЗАРЕЗЕРВИРОВАНО — остальные элементы могут занять его место

Сравнение: Практические примеры

Пример 1: Наложение элементов

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    background: lightgray;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 255, 0.5);
    width: 100px;
    height: 100px;
  }
</style>

<div class="container">
  <div class="overlay">Overlaid</div>
</div>
<!-- overlay перекрывает часть container -->

Пример 2: Tooltip'ы и меню

<style>
  .button-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .button {
    padding: 10px 20px;
  }
  
  .tooltip {
    position: absolute;
    bottom: 100%;   /* Над кнопкой */
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
  }
  
  .button-wrapper:hover .tooltip {
    display: block;
  }
</style>

<div class="button-wrapper">
  <button class="button">Hover me</button>
  <div class="tooltip">This is a tooltip</div>
</div>

Пример 3: Иконки внутри элементов

<style>
  .input-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .input {
    padding-right: 40px;
  }
  
  .clear-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
</style>

<div class="input-wrapper">
  <input type="text" class="input" />
  <span class="clear-icon">X</span>
</div>

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

Оба relative и absolute создают новый контекст позиционирования, влияющий на z-index:

<style>
  .parent1 {
    position: relative;
    z-index: 1;
  }
  
  .child1 {
    position: absolute;
    z-index: 9999; /* Будет под parent2 с z-index: 2 */
  }
  
  .parent2 {
    position: relative;
    z-index: 2;
  }
</style>

<div class="parent1">
  <div class="child1">Child 1</div>
</div>
<div class="parent2">Parent 2 поверх Child 1</div>

Использование в React компонентах

Dropdown меню

const DropdownMenu = ({ isOpen, items }) => {
  return (
    <div className="relative">
      <button>Menu</button>
      {isOpen && (
        <ul className="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg">
          {items.map(item => (
            <li key={item.id}>{item.label}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

Modal с фоном

const Modal = ({ isOpen, children }) => {
  if (!isOpen) return null;
  
  return (
    <>
      {/* Backdrop занимает весь экран */}
      <div className="fixed inset-0 bg-black bg-opacity-50" />
      
      {/* Modal в центре */}
      <div className="fixed inset-0 flex items-center justify-center">
        <div className="bg-white rounded-lg shadow-lg p-6 relative z-10">
          {children}
        </div>
      </div>
    </>
  );
};

Badge на иконке

const NotificationIcon = ({ count }) => {
  return (
    <div className="relative inline-block">
      <BellIcon />
      {count > 0 && (
        <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
          {count}
        </span>
      )}
    </div>
  );
};

Таблица сравнения

Свойствоrelativeabsolute
Базис позиционированияНорм. положение элементаБлижайший позиционированный предок
Место в потокеЗарезервированоНе зарезервировано (удалено)
Влияние на соседейИгнорируют смещениеИгнорируют элемент
Контекст для потомковСоздаёт для absoluteСоздаёт для absolute
z-indexЧасто не нуженЧасто нужен
ИспользованиеНебольшие смещенияНаложения, меню, модалы

Вывод

relative используется для небольших смещений элементов и создания контекста позиционирования для потомков. Место элемента в потоке остаётся зарезервировано.

absolute удаляет элемент из потока и позиционирует его относительно предка. Это критично для:

  • Наложений
  • Tooltip'ов и меню
  • Иконок внутри элементов
  • Модалов и dropdown'ов

Практическое правило: используй relative на контейнере и absolute на содержимое, которое нужно позиционировать.

В чем разница между absolute и relative? | PrepBro