В чем разница между position fixed и position sticky

Вопрос

В чем разница между position fixed и position sticky

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает разницу в поведении и применении этих свойств. Важно показать знание особенностей (например, sticky работает только внутри родительского контейнера, а fixed — относительно viewport).

Ключевые тезисы

• position: fixed фиксирует элемент относительно viewport (окна браузера), независимо от прокрутки страницы. Пример: навигационная панель, которая всегда видна.
• position: sticky делает элемент "липким" при достижении определенной позиции (заданной через top, bottom и т.д.) внутри родительского контейнера. Пример: заголовок таблицы, который прилипает при прокрутке.
• Fixed не занимает места в потоке документа, а sticky — занимает, пока не активируется (становится фиксированным).
• Sticky требует указания хотя бы одного из свойств (top, bottom и т.д.), иначе поведение будет как у relative.

Подробный ответ

position: fixed и position: sticky — это два способа позиционирования элементов в CSS, которые часто путают. Fixed фиксирует элемент относительно viewport (окна браузера), независимо от прокрутки страницы. Это полезно для элементов, которые должны быть всегда видны, например, навигационная панель или кнопка "Наверх". Элемент с fixed не занимает места в потоке документа, что может привести к наложению контента.

Sticky, с другой стороны, делает элемент "липким" при достижении определенной позиции (заданной через top, bottom и т.д.) внутри родительского контейнера. До этого момента элемент ведет себя как relative. Это удобно для заголовков таблиц или секций, которые должны прилипать при прокрутке. Важно отметить, что sticky требует указания хотя бы одного из свойств (top, bottom и т.д.), иначе поведение будет как у relative.

Fixed полностью вырывает элемент из потока документа, а sticky — только после активации (когда элемент достигает заданной позиции). Также sticky зависит от родительского контейнера: если у родителя overflow: hidden, sticky не сработает. Fixed же всегда привязан к viewport, независимо от структуры DOM.

В плане производительности fixed может вызывать рефлоу при изменении размеров окна, а sticky — при прокрутке. Оба свойства могут влиять на производительность при активных анимациях, но fixed обычно более затратен из-за постоянного пересчета позиции.

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

Пример 1

Пример fixed: навигационная панель, которая всегда видна вверху экрана:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

Пример 2

Пример sticky: заголовок таблицы, который прилипает при прокрутке:

.table-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

Пример 3

Пример sticky внутри ограниченного контейнера (не сработает, если у родителя overflow: hidden):

<div style="height: 200px; overflow: scroll;">
  <div style="position: sticky; top: 10px;">Липкий элемент</div>
</div>

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

• Использование sticky без указания top, bottom, left или right (ведет себя как relative).
• Попытка использовать sticky внутри родителя с overflow: hidden (не сработает).
• Неучет наложения fixed-элементов на основной контент (нужен padding или margin).
• Игнорирование поддержки браузеров (sticky не работает в IE и старых версиях Edge).

Связанные темы

• Поток документа (document flow) и вырывание из него (fixed, absolute).
• z-index и контекст наложения (stacking context).
• Производительность рендеринга при использовании fixed/sticky.
• Альтернативы sticky через JavaScript (например, Intersection Observer).

Follow-up вопросы

Как влияет родительский контейнер с overflow: hidden на position: sticky?

Уровень: intermediate

Если у родительского контейнера установлено overflow: hidden, sticky не будет работать, так как это свойство ограничивает область видимости и прокрутки внутри контейнера.

Можно ли использовать position: fixed внутри трансформированного элемента (например, с transform: translate())?

Уровень: advanced

Да, но поведение изменится: fixed будет позиционироваться относительно ближайшего трансформированного родителя, а не viewport. Это особенность спецификации CSS.

Какие браузеры не поддерживают position: sticky и как это обойти?

Уровень: intermediate

Старые версии браузеров (например, IE11) не поддерживают sticky. Для поддержки можно использовать полифилы или JavaScript-решения, например, отслеживать скролл и менять position динамически.

Как position: fixed влияет на производительность при анимациях?

Уровень: advanced

Элементы с fixed могут вызывать пересчет слоев (layout thrashing) при анимациях, так как они изолированы от основного потока. Для оптимизации используйте will-change: transform или аппаратное ускорение.

В чем разница между sticky и relative + JavaScript для реализации липкого заголовка?

Уровень: basic

sticky — нативное решение, работает плавнее и без затрат на выполнение JS-кода. JavaScript-реализация дает больше контроля, но требует обработки событий скролла и может быть менее производительной.