CSS Anchor Positioning: как привязывать элементы к другим элементам

CSS Anchor Positioning позволяет позиционировать один absolute-элемент относительно другого элемента-якоря, даже если они находятся в разных ветках DOM. Это полезно для попапов, подсказок, меню и любых интерфейсных связок, где нужно держать элемент рядом с триггером без ручных пересчётов координат.

Вместо привязки к контейнеру используются anchor-name, position-anchor, position-area и anchor(): ими можно выбрать якорь, задать сторону и точно совместить границы элементов. В Chrome это уже работает с мая 2024 года, а на практике даёт более надёжную и гибкую альтернативу ручному position: absolute для связанных UI-элементов.

https://habr.com/ru/articles/1092540/