position-anchor

Свойство position-anchor определяет якорный элемент, к которому должен быть привязан текущий.

        
          
          .target {  position-anchor: --my-anchor;}
          .target {
  position-anchor: --my-anchor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Возможные значения position-anchor:

• auto — значение по умолчанию, дефолтное якорное имя не задаётся;
• <anchor-name> — имя, заданное в свойстве anchor-name якорного элемента, должно начинаться с двух дефисов.

        
          
          .anchor {  anchor-name: --my-anchor;}.target {  position: absolute;  position-anchor: --my-anchor;}
          .anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство position-anchor указывает дефолтный якорный элемент, относительно которого будет позиционироваться текущий. Функции anchor() и anchor-size(), отвечающие за расположение и размер текущего элемента, будут использовать значение position-anchor, чтобы привязаться к нужному якорному элементу, если в них явно не передать имя другого якоря.

💡 Не забудьте указать position: absolute или position: fixed для таргет элемента, так как Anchor Positioning работает только с этими видами позиционирования.