position-area в CSS: полное руководство

Свойство position-area представляет собой инновационный механизм позиционирования, который позволяет размещать элемент относительно его якоря с невероятной точностью и гибкостью. В отличие от классических подходов, где разработчикам приходилось использовать сложные комбинации top, right, bottom и left, position-area предлагает интуитивно понятную систему координат.

Свойство position-area позволяет разместить целевой элемент в любой из девяти ячеек этой сетки, включая центрирование по горизонтали и вертикали. Это особенно полезно при создании:

• всплывающих подсказок (тултипов)
• контекстных меню
• модальных окон, привязанных к элементам
• выпадающих списков
• информационных панелей

Свойство принимает два значения, которые отвечают за вертикальное и горизонтальное позиционирование элемента.

.anchored-element {
    position: absolute;
    position-anchor: --anchorElement;
    position-area: top left;
}

/* Центрирование по вертикали, привязка к правому краю */
.element-one {
    position-area: center right;
}

/* Привязка к нижнему краю, центрирование по горизонтали */
.element-two {
    position-area: bottom center;
}

/* Полное заполнение области */
.element-three {
    position-area:span-all;
}

Эти ключевые слова можно комбинировать, чтобы разместить элемент в одной, двух, трех, четырех, шести или всех девяти ячейках воображаемой сетки 3×3, где центральная ячейка — это элемент-якорь.

Все ключевые слова position-area можно разделить на несколько групп в зависимости от их типа. Для удобства они представлены в таблице ниже.

Список ключевых точек (значений) position-area

Важные замечания по использованию

• Комбинации: Значение свойства может состоять из одного или двух ключевых слов. Если указано только одно, второе подставляется автоматически (например, top эквивалентно top span-all).
• Смешение типов: Нельзя смешивать ключевые слова из разных категорий в одном значении. Например, position-area: bottom inline-end будет недопустимым, так как bottom — физическое, а inline-end — логическое.
• Порядок: Для физических ключевых слов порядок не важен (top left то же, что left top). Однако для логических ключевых слов, таких как start и end, порядок имеет значение: первое слово отвечает за блоковое направление (ряд), а второе — за инлайн (колонку).

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

<button class="help-trigger">Помощь</button>
<div class="tooltip-element">
    Здесь будет текст подсказки с дополнительной информацией
</div>

.help-trigger {
  anchor-name: --helpAnchor;
  cursor: pointer;
}

.help-trigger:hover+.tooltip-element {
  opacity: 1;
}

.tooltip-element {
  opacity: 0;
  position: absolute;
  position-anchor: --helpAnchor;
  position-area: top;  
  padding: 3px 10px;
  font-size: 16px;  
  background: #e9e9e9;
  border-radius: 6px;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
}

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

.advanced-menu {
    position: absolute;
    position-anchor: --menuAnchor;
    position-area: bottom span-right;
    translate: 0 12px;    
}

Здесь мы стилизуем выпадающее меню, которое появляется под якорем, растягиваясь от центра до правого края. translate смещает меню вниз на 12 пикселей от исходной позиции.

.multilingual-menu {
    position: absolute;
    position-anchor: --languageAnchor;
    position-area: y-end x-start;
    min-width: 180px;
}

/* Для языков с написанием справа налево */
:lang(ar) .multilingual-menu {
    position-area: y-end x-end;
}

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

.responsive-card {
    position: absolute;
    position-anchor: --cardAnchor;
}

@media (max-width: 768px) {
    .responsive-card {
        position-area: bottom span-all;
        left: 0;
        right: 0;
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    .responsive-card {
        position-area: center right;
        max-width: 320px;
    }
}

На мобильных устройствах элемент растягивается на всю ширину и располагается под якорем, а на десктопах появляется справа от него, центрируясь по вертикали.

@position-try --fallback-bottom {
  position-area: top span-right; /* Пробуем сверху */
}

.safe-positioning {
  position: absolute;
  position-anchor: --dynamicAnchor;
  position-area: bottom span-right; /* Основная позиция - снизу */
  max-height: 400px;
  overflow-y: auto;
  position-try: --fallback-bottom;
}

В этом примере мы не только задаем предпочтительное позиционирование, но и определяем запасной вариант на случай, если элемент не помещается в области просмотра.

.optimized-tooltip {
    position: absolute;
    position-anchor: --hoverAnchor;
    position-area: top center;
    transition: opacity 0.2s ease;
    will-change: transform;
    pointer-events: none;
}

Рекомендации по оптимизации

• используйте will-change для элементов, которые часто меняют позицию
• избегайте излишней вложенности позиционированных элементов
• применяйте pointer-events: none для элементов, которые не должны перехватывать клики
• минимизируйте количество пересчетов позиций с помощью CSS-переменных

position-area представляет собой мощный инструмент современного CSS, который значительно упрощает создание сложных интерфейсов. Эта технология особенно ценна при разработке интерактивных компонентов, где требуется точное позиционирование относительно других элементов.

Если вы хотите систематизировать знания, освоить все тонкости веб-верстки и научиться создавать профессиональные интерфейсы, которые радуют заказчиков и пользователей — обратите внимание на наш онлайн-курс «Веб-верстка с нуля до профессионала». Мы подготовили десятки практических заданий, реальных кейсов и шаблонов, которые можно использовать в коммерческих проектах. А если вам нужен не курс, а готовый сайт под ключ — наша веб-студия с радостью возьмет эту задачу на себя. Мы создаем современные, быстрые и адаптивные сайты, которые приносят реальную пользу бизнесу. Напишите нам, и мы обсудим ваш проект!