Какое свойство position появилось недавно?

Современные свойства позиционирования в CSS

В рамках классических значений свойства position ( static, relative, absolute, fixed, sticky) относительно «давно» новым было именно sticky, которое стало широко поддерживаться в современных браузерах в 2017-2018 годах. Однако если говорить о совсем новых, экспериментальных или появившихся в последние год-два свойствах позиционирования, то здесь можно выделить несколько кандидатов.

position: anchor

Это наиболее вероятный ответ на ваш вопрос. position: anchor (или более точное название CSS Anchor Positioning) — это новейшая инициатива, которая активно разрабатывается и тестируется в браузерах (например, в Chrome с версии 123). Она позволяет элементу позиционироваться относительно другого, произвольного «якорного» элемента, а не только относительно окна, документа или ближайшего positioned-родителя.

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

.anchor-element {
  anchor-name: --my-anchor;
}

.popup-element {
  position: anchor(--my-anchor);
  /* Элемент будет позиционироваться относительно .anchor-element */
  top: anchor-top;
  left: anchor-right;
}

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

position: logical

Это менее известное, но также появляющееся в обсуждениях значение. Он связано с CSS Logical Properties и позволяет позиционировать элементы с учетом направления текста (writing-mode), например start и end вместо left и right.

.element {
  position: logical;
  inset-block-start: 10px; /* Вместо top в вертикальном режиме */
  inset-inline-end: 20px; /* Вместо right в горизонтальном режиме */
}

Контекст: почему это важно?

Появление новых значений position связано с эволюцией веб-интерфейсов:

• Компонентный подход: Требуется более гибкое позиционирование внутри компонентов, независимое от общего контента.
• Динамические интерфейсы: Сложные UI с множеством выпадающих списков, тултипов, контекстных меню.
• Адаптивность и логические свойства: Необходимость поддерживать разные направления текста (RTL, вертикальное письмо).

Проблемы, которые решает position: anchor

• Отсутствие зависимости от скролла: Элемент остается прикрепленным к якорю даже при прокрутке, но не к окну как fixed.
• Произвольный выбор якоря: Можно выбрать любой элемент в DOM как точку отсчета.
• Динамические вычисления на CSS: Позиция вычисляется браузером, что уменьшает нагрузку на JavaScript.

Текущее состояние поддержки

• position: sticky: Полностью поддерживается во всех современных браузерах.
• position: anchor: Экспериментальная функциональность, доступная в Chrome под флагом или в ранних стабильных версиях. Для Firefox и Safari пока в статусе разработки или планирования.
• position: logical: Часть общей системы логических свойств, которая постепенно реализуется в браузерах.

Заключение

Если говорить о самом новом и революционном свойстве, то это именно position: anchor. Он расширяет парадигму позиционирования в CSS, предлагая механизм, который ранее был доступен только через сложные JavaScript-библиотеки. Для фронтенд-разработчика важно следить за этими нововведениями, так они позволяют создавать более надежные, производительные и сложные интерфейсы с меньшим количеством кастомного кода. Однако при использовании в production необходимо учитывать текущую поддержку браузеров и предусматривать fallback-решения с помощью традиционных absolute или fixed позиционирования и JavaScript.