anchor()

Синтаксис функции anchor() следующий:

anchor(<anchor-name> <anchor-side>, <length-percentage>)

Параметры:

<anchor-name> Необязательно

Значение свойства anchor-name элемента-якоря, относительно которого нужно позиционировать сторону элемента. Это значение <dashed-ident>. Если параметр опущен, используется стандартный якорь элемента, указанный в свойстве position-anchor, или связанный с элементом через атрибут anchor HTML.

Примечание: Указание <anchor-name> внутри функции anchor() не связывает элемент с якорем; оно только позиционирует элемент относительно этого якоря. Для установления связи всё ещё необходимо свойство position-anchor CSS или атрибут anchor HTML.

<anchor-side>

Указывает сторону якоря или относительное расстояние от start стороны, относительно которой позиционируется элемент. Если используется физическое или логическое значение, не совместимое со свойством inset, на котором установлена anchor(), используется значение по умолчанию. Допустимые значения включают:

top

Верхняя сторона элемента-якоря.

right

Правая сторона элемента-якоря.

bottom

Нижняя сторона элемента-якоря.

left

Левая сторона элемента-якоря

start

Логический начальный край содержащего блока элемента-якоря вдоль оси свойства inset, на котором установлена функция anchor().

end

Логический конечный край содержащего блока элемента-якоря вдоль оси свойства inset, на котором установлена функция anchor().

self-start

Логический начальный край содержимого элемента-якоря вдоль оси свойства inset, на котором установлена функция anchor().

self-end

Логический конечный край содержимого элемента-якоря вдоль оси свойства inset, на котором установлена функция anchor().

center

Центр оси свойства inset, на котором установлена функция anchor().

<percentage>

Указывает расстояние в процентах от начала содержимого элемента вдоль оси свойства inset, на котором установлена функция anchor().

Модуль CSS позиционирования по якорям определяет два дополнительных <anchor-side> значения, inside и outside, которые ещё не реализованы.

<length-percentage> Необязательно

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

Возвращает значение <length>.

Функция anchor() позволяет позиционировать элемент относительно краёв элемента-якоря. Она допустима только в значениях свойства inset для элементов с абсолютным или фиксированным позиционированием.

Она возвращает значение <length>, указывающее расстояние между стороной элемента с позиционированием по якорю, указанной свойством inset, и стороной элемента-якоря, указанной выбранным значением <anchor-side>. Поскольку она возвращает значение <length>, её можно использовать в других функциях CSS, принимающих значения длины, включая calc(), clamp() и т. д.

Если якоря с заданным именем в <anchor-name> нет или у позиционированного элемента нет связанного якоря (т.е. через свойство position-anchor), первый параметр считается недействительным, и используется запасное значение <length-percentage> , если оно доступно. Например, если top: anchor(bottom, 50px) было указано в позиционированном элементе, но никакой якорь с ним не был связан, использовалось бы запасное значение, поэтому top получило бы вычисленное значение 50px.

Для получения подробной информации об особенностях и использовании якорей см. страницу раздела CSS позиционирования по якорям и руководство Использование CSS позиционирования по якорям.

Свойства CSS inset, которые принимают функцию anchor() в качестве компонента значения, включают:

• top
• left
• bottom
• right
• inset сокращение
• inset-block-start
• inset-block-end
• inset-block сокращение
• inset-inline-start
• inset-inline-end
• inset-inline сокращение

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

Это означает, что физические значения <anchor-side> могут быть использованы внутри значений физических свойств inset, если направление оси свойства совпадает с направлением <anchor-side>. Другими словами, стороны top и bottom не являются допустимыми значениями внутри свойств left и right, а стороны left и right не являются допустимыми значениями внутри свойств top и bottom. Например, top: anchor(bottom) допустимо, так как оба значения вертикальные, но top: anchor(left) недопустимо, так как left является горизонтальным значением. Если будет указано top: anchor(left, 50px), то будет использовано значение по умолчанию, поэтому top получит вычисленное значение 50px. Если значение по умолчанию отсутствует, свойство inset будет вести себя так, как будто оно было установлено в auto.

Вы можете использовать логические значения <anchor-side> как в логических, так и в физических свойствах inset, так как логические значения <anchor-side> относительны к соответствующей оси свойства inset, независимо от того, является ли свойство логическим или относительным. Например, top: anchor(start), top: anchor(self-end), inset-block-start: anchor(end) и inset-inline-end: anchor(self-start) все работают корректно.

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

• В горизонтальном режиме написания направление блока сверху вниз, поэтому inset-block-end: anchor(bottom) будет работать, но inset-block-end: anchor(left) несовместимо. Если было установлено значение inset-block-end: anchor(left, 50px), вычисленное значение будет 50px, и позиционированный элемент будет расположен на расстоянии 50px от конца блока (снизу) ближайшего позиционированного предка или области просмотра, в зависимости от установленного значения position.
• В вертикальном режиме написания направление блока справа налево или слева направо, поэтому inset-block-end: anchor(left) будет работать, но inset-block-end: anchor(top) несовместимо. Если было установлено значение inset-block-end: anchor(top, 50px), вычисленное значение будет 50px, и позиционированный элемент будет расположен на расстоянии 50px от конца блока (слева или справа в зависимости от режима написания) ближайшего позиционированного предка или области просмотра, в зависимости от установленного значения position.

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

Значения center и <percentage> допустимы внутри функции anchor() во всех логических и физических свойствах inset.

В таблице ниже перечислены свойства inset и совместимые с ними значения параметра <anchor-side>. Мы привели только полные (развёрнутые) свойства inset, поскольку они составляют значения свойства inset в сокращённой форме.

Когда функция anchor() ссылается на сторону стандартного якоря, вы можете включить margin, чтобы создать необходимое расстояние между краями якоря и позиционированного элемента. В качестве альтернативы, вы можете включить функцию anchor() внутри функции calc(), чтобы добавить отступ.

В этом примере правая граница позиционированного элемента выровнена с левой границей элемента-якоря, а затем добавляется отступ, чтобы создать некоторое расстояние между краями:

.positionedElement {
  right: anchor(left);
  margin-left: 10px;
}

В этом примере логическая граница блока позиционированного элемента смещена на 10px от логической стартовой границы блока элемента-якоря:

.positionedElement {
  inset-block-end: calc(anchor(start) + 10px);
}

Вы можете позиционировать элемент относительно нескольких якорей, указав различные значения <anchor-name> внутри функции anchor() различных свойств inset того же элемента (см. Элемент, позиционированный относительно нескольких якорей ниже). Это может использоваться для создания полезных функций, таких как элементы управления перетаскиванием в углах позиционированного элемента, которые могут быть использованы для его изменения размера.

Хотя позиционированный элемент может быть позиционирован относительно более чем одного элемента-якоря, он всегда связан только с одним якорем, определенным через свойство position-anchor (или атрибут HTML anchor). Это тот якорь, с которым элемент будет прокручиваться при прокрутке страницы; он также может использоваться для управления условиями отображения элемента условного скрытия.

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<length-percentage> = 
  <length>      |
  <percentage>  

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

HTML

Мы включаем элемент <div>, который будет нашим якорем, и элемент <p>, который мы будем позиционировать относительно этого якоря:

<div class="anchor">⚓︎</div>

<p class="positionedElement">This is a positioned element.</p>

CSS

Мы устанавливаем значение свойства anchor-name элемента-якоря как значение свойства position-anchor позиционированного элемента, чтобы связать элементы, а затем устанавливаем три свойства inset для элемента, позиционированного относительно якоря. Первые два позиционируют верхнюю границу элемента на уровне верхней границы якоря, а нижнюю границу на уровне нижней границы якоря. В третьем свойстве inset функция anchor() используется внутри функции calc() для позиционирования левой границы элемента на расстоянии 10px от правой границы якоря.

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
}

.positionedElement {
  position: absolute;
  position-anchor: --infobox;
  margin: 0;
  top: anchor(top);
  left: calc(anchor(right) + 10px);
  bottom: anchor(bottom);
  background-color: olive;
  border: 1px solid darkolivegreen;
}

Результаты

В этом примере показано расположение элемента относительно якоря с помощью свойств top и left, которые определяются с помощью anchor() функций. Также включены два раскрывающихся списка, которые позволяют вам изменять значения <anchor-side> внутри этих anchor() функций, чтобы увидеть их влияние.

HTML

Мы определяем два элемента <div>, один с классом anchor, а другой — с классом infobox. Они предназначены для элемента якоря и элемента, который будет позиционироваться относительно него соответственно.

Мы также включили текст-заполнитель вокруг этих двух <div> элементов, чтобы сделать <body> выше, чтобы появилась возможность прокрутки. В этом примере также есть два элемента <select>, создающие раскрывающиеся списки, которые позволяют выбирать разные значения <anchor-side> для размещения позиционируемого элемента. Для краткости текст-заполнитель и <select> элементы скрыты.

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Мы объявляем anchor <div> в качестве элемента якоря, задавая для него имя якоря с помощью свойства anchor-name. Затем мы связываем его с позиционируемым элементом, задавая для него то же значение свойства position-anchor. top: anchor(--myAnchor bottom) позиционирует верхний край информационного блока, выровненным с нижним краем его якоря, а left: anchor(right) позиционирует левый край информационного блока, выровненным с правым краем его якоря. Это обеспечивает начальное позиционирование, которое будет перезаписано при выборе различных значений из раскрывающихся списков.

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  top: anchor(--myAnchor bottom);
  left: anchor(right);
}

JavaScript

Мы обрабатываем событие change , которое возникает при выборе нового значения <anchor-side>, и задаём выбранное значение как <anchor-side> в функции anchor() внутри соответствующего свойства отступа информационного блока (top или left).

const infobox = document.querySelector(".infobox");
const topSelect = document.querySelector("#top-anchor-side");
const leftSelect = document.querySelector("#left-anchor-side");

topSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.top = `anchor(--myAnchor ${anchorSide})`;
});

leftSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.left = `anchor(${anchorSide})`;
});

Результат

Выберите разные значения из раскрывающихся списков, чтобы увидеть, как они влияют на позиционирование информационного блока.

В этом примере позиционируется элемент относительно двух разных якорей, которые используются для задания положения верхнего левого и нижнего правого углов элемента, позиционируемого относительно якоря. Якоря можно перемещать с помощью клавиатуры или перетаскивать, изменяя размер позиционируемого элемента.

HTML

Всего определяются три элемента <div>. Первые два имеют класс anchor и будут определены как якоря; каждый из них имеет индивидуальное id, которое будет использоваться для задания различной информации о позиционировании. Последний <div> имеет класс infobox и будет определён как позиционируемый элемент. Мы включаем атрибут tabindex, чтобы можно было получить фокус с помощью клавиатуры.

<div id="anchor1" class="anchor" tabindex="0">⚓︎1</div>

<div id="anchor2" class="anchor" tabindex="0">⚓︎2</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Якорям присваивается разное значение anchor-name, значение position — absolute, и разные значения отступов для позиционирования якорей в форме прямоугольника.

.anchor {
  position: absolute;
}

#anchor1 {
  anchor-name: --myAnchor1;
  top: 50px;
  left: 100px;
}

#anchor2 {
  anchor-name: --myAnchor2;
  top: 200px;
  left: 350px;
}

Элементу, позиционируемому относительно якоря, с установленным значением position в fixed, один якорь ассоциируется с помощью свойства position-anchor. Он позиционируется относительно двух якорей, включающих два разных значения <anchor-name> с anchor() функциями, установленных на свойствах отступов. В данном случае для параметра <anchor-side> использовались значения <percentage>, определяющие расстояние от начала оси свойства отступа, на котором установлена функция.

.infobox {
  position-anchor: --myAnchor1;
  position: fixed;
  top: anchor(--myAnchor1 100%);
  left: anchor(--myAnchor1 100%);
  bottom: anchor(--myAnchor2 0%);
  right: anchor(--myAnchor2 0%);
}

Результат

Позиционируемый элемент позиционируется относительно обоих элементов якоря. Перетащите их мышкой или используйте клавиши табуляции, а также клавиши W, A, S и D для перемещения вверх, вниз, влево и вправо. Посмотрите, как это изменяет их положение и, как следствие, область позиционируемого элемента. Прокрутите, чтобы увидеть, как сохраняются положения всех элементов.

• position-anchor
• position-area
• anchor-size() функция
• Руководство по использованию CSS позиционирования с помощью якорей
• Обработка переполнения: поиск решений и условное скрытие руководство
• Модуль CSS позиционирования с помощью якорей