🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Как привязать подсказку к кнопке через CSS Anchor Positioning
Подсказку легко поставить над кнопкой, пока та не оказалась у верхнего края окна. CSS Anchor Positioning связывает элементы и может перенести подсказку вниз, если сверху мало места.
Для тренировки дайте кнопке имя через anchor-name, у подсказки задайте position: fixed и свяжите её с кнопкой через position-anchor. Затем position-area: top поставит подсказку сверху, а position-try-fallbacks: bottom проверит место снизу при выходе за край окна.
Соберите пример и прокрутите страницу. С absolute подсказка движется вместе с блоком предка, а у fixed её граница — окно браузера. В подробном разборе есть интерактивные примеры и варианты для неполной поддержки браузерами.