anchor() – царица якорей

Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием.

Простейший вид якорей:
1. anchor-name у якоря;
2. position-anchor + position-area у привязанного элемента.

Продвиутый вид:
1. anchor-name у якоря;
2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента.

Например:

.anchor {
  anchor-name: --a1;
}

.target {
  position: absolute;
  left: anchor(--a1 right);
}

То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов.

Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.