Hacker News Digest

Краткое руководство по anchor-positioning

Anchor-positioning позволяет размещать элемент относительно другого без JavaScript. Пример: выпадающее меню под аватаром.

1. Связываем элементы

   • Даём якорю имя:

   .profile-button { anchor-name: --profile-button; }
   

   • Указываем цели, к чему привязаться:

   .profile-menu {
     position-anchor: --profile-button;
     position: absolute;
   }
   

2. Выбираем позицию
   Свойство position-area размещает элемент на 9-клеточной сетке относительно якоря.
   Примеры:

   • position-area: bottom left; — снизу по левому краю.
   • position-area: right center; — справа по центру.

3. Тонкая настройка
   Вместо position-area можно использовать top, left, right, bottom с ключевыми словами anchor.

   top: anchor(bottom);
   left: anchor(left);
   

4. Попытки размещения
   Если заданное положение не помещается, браузер автоматически ищет свободное место внутри контейнера. Поведение регулируется position-try-options.

5. Поддержка
   Работает в Safari Technology Preview 202 и Chrome 125+.