Какие знаешь значения свойства Position? Какая между ними разница?

Краткий ответ

CSS свойство position определяет способ позиционирования элемента на странице:

static — обычный поток документа (по умолчанию) 📄
relative — относительно своего обычного положения 📍
absolute — относительно ближайшего позиционированного родителя 🎯
fixed — относительно окна браузера 🔒
sticky — комбинация relative и fixed 📌

/* Основные значения position */
.static { position: static; }
.relative { position: relative; top: 10px; }
.absolute { position: absolute; top: 0; left: 0; }
.fixed { position: fixed; top: 0; right: 0; }
.sticky { position: sticky; top: 20px; }

Полный ответ

Свойство position — это как система координат для элементов! Оно определяет, как элемент будет расположен на странице и относительно чего он будет позиционироваться. 🗺️

1. position: static (по умолчанию)

Элемент находится в обычном потоке документа:

.static-element {
  position: static;
  /* top, right, bottom, left игнорируются */
}

<div class="static-element">Обычный элемент</div>

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

Свойства top, right, bottom, left не работают
Элемент занимает место в потоке документа
Поведение по умолчанию для всех элементов

2. position: relative

Позиционирование относительно своего обычного места:

.relative-element {
  position: relative;
  top: 20px;
  left: 30px;
  background: lightblue;
}

<div>Элемент до</div>
<div class="relative-element">Смещённый элемент</div>
<div>Элемент после</div>

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

Элемент сдвигается от своего обычного места
Место в потоке документа сохраняется
Создаёт контекст позиционирования для дочерних элементов

3. position: absolute

Позиционирование относительно ближайшего позиционированного родителя:

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}
 
.absolute-element {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 50px;
  background: coral;
}

<div class="container">
  <div class="absolute-element">Абсолютный</div>
</div>

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

Элемент удаляется из потока документа
Позиционируется относительно ближайшего родителя с position ≠ static
Если такого родителя нет — относительно <html>

4. position: fixed

Позиционирование относительно окна браузера:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  color: white;
  z-index: 1000;
}
 
.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #007bff;
  border-radius: 50%;
}

<header class="fixed-header">Фиксированная шапка</header>
<button class="fixed-button">↑</button>

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

Элемент всегда остаётся на одном месте при прокрутке
Удаляется из потока документа
Позиционируется относительно viewport

5. position: sticky

Гибридное поведение relative + fixed:

.sticky-nav {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #ddd;
  z-index: 100;
}
 
.sticky-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

<nav class="sticky-nav">Липкая навигация</nav>
<aside class="sticky-sidebar">Боковая панель</aside>

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

Ведёт себя как relative до достижения порога
Становится fixed при прокрутке
Остаётся в границах родительского контейнера

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

Модальное окно

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
 
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
}

Всплывающая подсказка

.tooltip-container {
  position: relative;
  display: inline-block;
}
 
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
 
.tooltip-container:hover .tooltip {
  opacity: 1;
}

Карточка с бейджем

.card {
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
 
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

Контекст позиционирования

Элементы с position ≠ static создают контекст позиционирования:

.parent {
  position: relative; /* Создаёт контекст */
}
 
.child {
  position: absolute;
  top: 0; /* Относительно .parent */
  left: 0;
}

Z-index и слои

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

.layer-1 {
  position: relative;
  z-index: 1;
}
 
.layer-2 {
  position: absolute;
  z-index: 2; /* Выше layer-1 */
}
 
.layer-3 {
  position: fixed;
  z-index: 999; /* Самый верхний */
}

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

Значение	Поток документа	Относительно чего	Прокрутка
`static`	✅ Остаётся	—	Прокручивается
`relative`	✅ Остаётся	Своего места	Прокручивается
`absolute`	❌ Удаляется	Родителя	Прокручивается
`fixed`	❌ Удаляется	Viewport	Не прокручивается
`sticky`	✅ Остаётся*	Родителя	Условно

Лучшие практики

Используйте relative для создания контекста позиционирования 📍
Absolute для точного размещения внутри контейнера 🎯
Fixed для элементов UI — шапки, кнопки 🔒
Sticky для навигации и боковых панелей 📌
Не забывайте z-index для управления слоями 📚

Частые ошибки

❌ Неправильно:

.element {
  position: static;
  top: 10px; /* Не работает */
}

✅ Правильно:

.element {
  position: relative;
  top: 10px;
}

Заключение

Свойство position — основа для создания сложных макетов:

static — обычное поведение
relative — смещение от обычного места
absolute — точное позиционирование
fixed — фиксация относительно экрана
sticky — умное прилипание

Правильное использование позиционирования поможет создать интуитивные и функциональные интерфейсы! 🎨