Стратегии absolute и fixed

Floating UI предоставляет мощный и гибкий API для управления позиционированием всплывающих элементов, таких как тултипы, модальные окна, меню и поповеры. Основой правильного расположения является выбор стратегии позиционирования: absolute или fixed. Понимание различий между ними критически важно для корректного поведения элементов в различных контекстах страницы.

Стратегия absolute

Стратегия absolute позиционирует элемент относительно ближайшего родительского элемента с позиционированием, отличным от static. Если такого родителя нет, вычисление происходит относительно body.

Ключевые особенности:

  • Элемент реагирует на прокрутку родительского контейнера.
  • Хорошо подходит для вложенных интерфейсов, когда всплывающий элемент должен следовать за своим контейнером.
  • Позволяет использовать offset и middleware для точной настройки смещения относительно целевого элемента.

Пример использования:

import {computePosition, offset, flip, shift} from '@floating-ui/dom';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

computePosition(button, tooltip, {
  strategy: 'absolute',
  middleware: [
    offset(10),
    flip(),
    shift({padding: 5})
  ]
}).then(({x, y}) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'absolute'
  });
});

В этом примере tooltip будет позиционироваться относительно родителя кнопки. При прокрутке контейнера tooltip будет следовать за кнопкой. Middleware flip и shift обеспечивают автоматическую корректировку позиции, чтобы элемент не выходил за границы видимой области.

Особенности работы при вложенных скроллерах:

Если кнопка находится внутри контейнера с overflow: auto или overflow: scroll, стратегия absolute позволяет всплывающему элементу “приклеиваться” к кнопке, оставаясь внутри области прокрутки. Это делает её предпочтительной для сложных UI с внутренними скроллерами.

Стратегия fixed

Стратегия fixed позиционирует элемент относительно окна браузера (viewport). В отличие от absolute, элемент не подчиняется родительским контейнерам и не смещается при прокрутке страницы.

Ключевые особенности:

  • Элемент всегда видим на экране, независимо от скролла родителя.
  • Идеальна для глобальных всплывающих элементов: модальные окна, глобальные тултипы, dropdown-меню поверх всего контента.
  • Поддерживает те же middleware, что и стратегия absolute, но координаты вычисляются относительно viewport.

Пример использования:

computePosition(button, tooltip, {
  strategy: 'fixed',
  middleware: [
    offset(10),
    flip(),
    shift({padding: 5})
  ]
}).then(({x, y}) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'fixed'
  });
});

В этом случае tooltip будет оставаться на месте при прокрутке страницы, даже если кнопка ушла из видимой области. Это особенно важно для элементов интерфейса, которые должны быть видимыми всегда, например, уведомлений.

Отличия между absolute и fixed

Характеристика absolute fixed
Относительно чего позиционируется Родительский элемент с position ≠ static Окно браузера (viewport)
Реакция на прокрутку Да, следит за скроллом контейнера Нет, остаётся на месте при скролле
Использование в сложных интерфейсах Вложенные меню, тултипы в контейнерах Глобальные уведомления, модальные окна, глобальные dropdown
Совместимость с middleware Полная Полная

Middleware и стратегии

Выбор стратегии влияет на работу middleware:

  • offset корректирует смещение относительно цели, одинаково для обеих стратегий.
  • flip проверяет доступное пространство и корректирует позицию; для absolute учитывает родительский контейнер, для fixed — viewport.
  • shift предотвращает выход элемента за границы; поведение зависит от стратегии позиционирования.

Важно понимать, что absolute лучше для локальных всплывающих элементов, fixed — для глобальных, но все middleware остаются применимыми.

Практические советы

  1. Комбинация со скролл-контейнерами: Если элемент находится внутри скроллера, используйте absolute, чтобы всплывающий элемент оставался привязанным к цели.
  2. Фиксированные элементы UI: Для уведомлений или тултипов, которые должны быть всегда видимы, применяйте fixed.
  3. Производительность: fixed иногда требует более частых перерасчётов позиции при динамическом изменении DOM, особенно с большим количеством элементов на странице.
  4. Стили CSS: Всегда явно задавайте position для элемента, иначе middleware не будет корректно применяться.

Эффективное использование стратегий absolute и fixed в Floating UI позволяет создавать динамичные, корректно позиционирующиеся всплывающие элементы, учитывающие как локальные контейнеры, так и глобальный viewport. Понимание их различий — ключ к стабильному и предсказуемому поведению UI.

Оглавление