anchor()

Функция anchor() привязывает таргет элемент к одной из сторон якорного элемента.

        
          
          .target {  top: anchor(bottom);}
          .target {
  top: anchor(bottom);
}

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

Функция anchor() принимает три аргумента:

• <anchor-name> — имя якоря, относительно которого нужно спозиционировать текущий таргет элемент. Необязятальный аргумент, если его опустить, то функция будет ссылаться на значение указаное в свойстве position-anchor;
• <anchor-side> — сторона якорного элемента, относительно которой нужно спозиционировать текущий таргет элемент;
• <length-percentage> – фолбэк-значение, применится, если функция не нашла якорный элемент, на который мы пытаемся сослаться, или если передали некорректное значение для <anchor-side>. Необязятальный аргумент.

        
          
          .anchor {  anchor-name: --my-anchor;}.target {  /*    Функция anchor() будет использовать якорь --my-anchor,    указанный в свойстве anchor-name,    поскольку в неё явно не передан никакой другой якорь.  */  top: anchor(bottom);  /*    В данном случае функция anchor() будет ссылаться на якорь --custom-anchor.    Якорь --my-anchor из свойства anchor-name будет проигнорирован.  */  top: anchor(--custom-anchor bottom);  /*    В этом примере target элемент будет иметь top: 50%,    если по каким-то причинам функция anchor() не сможет привязаться    к указанной стороне переданного якоря.  */  top: anchor(--custom-anchor bottom, 50%);}
          .anchor {
  anchor-name: --my-anchor;
}

.target {
  /*
    Функция anchor() будет использовать якорь --my-anchor,
    указанный в свойстве anchor-name,
    поскольку в неё явно не передан никакой другой якорь.
  */
  top: anchor(bottom);
  /*
    В данном случае функция anchor() будет ссылаться на якорь --custom-anchor.
    Якорь --my-anchor из свойства anchor-name будет проигнорирован.
  */
  top: anchor(--custom-anchor bottom);
  /*
    В этом примере target элемент будет иметь top: 50%,
    если по каким-то причинам функция anchor() не сможет привязаться
    к указанной стороне переданного якоря.
  */
  top: anchor(--custom-anchor bottom, 50%);
}

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

Функция anchor() ссылается на параметры позиционирования якорного элемента. Её можно использовать, чтобы расположить таргет элемент в нужном месте относительно якоря. Может быть применена только в inset-свойствах.

Чтобы лучше понять, как функция работает, давайте рассмотрим её работу на примере демки:

        
          
          .anchor {  anchor-name: --my-anchor;}.target {  position: absolute;  position-anchor: --my-anchor;  top: anchor(bottom);  left: anchor(right);}
          .anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(right);
}

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

Стоит отметить, что в качестве аргумента <anchor-side> в функцию можно передавать только значения, соответствующие оси inset-свойства, для которого функция применяется.

        
          
          .target {  /*    top и bottom находятся в одной оси (вертикальной),    поэтому следующие две строки будут работать.  */  top: anchor(top);  top: anchor(bottom);  /*    top находится в вертикальной оси, left и right в горизонтальной.    Оси разные, поэтому строчки ниже работать не будут.  */  top: anchor(left);  top: anchor(right);}
          .target {
  /*
    top и bottom находятся в одной оси (вертикальной),
    поэтому следующие две строки будут работать.
  */
  top: anchor(top);
  top: anchor(bottom);
  /*
    top находится в вертикальной оси, left и right в горизонтальной.
    Оси разные, поэтому строчки ниже работать не будут.
  */
  top: anchor(left);
  top: anchor(right);
}

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

Также при работе с функцией anchor() можно использовать процентные значения

        
          
          .target {  top: anchor(50%);}
          .target {
  top: anchor(50%);
}

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

использовать её значение в вычислениях

        
          
          .target {  top: calc(anchor(bottom) + 10px);}
          .target {
  top: calc(anchor(bottom) + 10px);
}

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

и взаимодействовать с логическими свойствами

        
          
          .target {  inset-block-end: anchor(start);}
          .target {
  inset-block-end: anchor(start);
}

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

Помимо этого в качестве <anchor-side> можно ещё использовать значения inside, outside:

• inside – соответствует той же самой стороне, для которой применяется функция anchor();
• outside – соответствует противоположной.