position-anchor

auto

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

<dashed-ident>

Имя элемента-якоря, с которым следует связать позиционируемый элемент, как указано в свойстве элемента-якоря anchor-name. Это известно как спецификатор по умолчанию для якоря.

Это свойство актуально только для "позиционированных" элементов — элементов и псевдоэлементов, у которых свойство position имеет значение absolute или fixed.

Для позиционирования элемента относительно элемента-якоря, позиционируемому элементу требуются три компонента: ассоциация, позиция и расположение. Свойства position-anchor и anchor-name обеспечивают ассоциацию.

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

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

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

Если связанный элемент-якорь скрыт, например, с помощью свойства display: none или visibility: hidden, или если он является частью пропускаемых содержимого другого элемента из-за наличия у него свойства content-visibility: hidden, позиционируемый элемент-якорь не будет отображаться.

Свойство position-anchor поддерживается для всех позиционируемых элементов, включая псевдоэлементы, такие как псевдоэлементы ::before и ::after. Псевдоэлементы неявно привязаны к тому же элементу, что и порождающий элемент псевдоэлемента, если не указано иное.

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

position-anchor = 
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>  

См. документацию anchor-name по основному использованию и дополнительным position-anchor примерам.

В этом примере элемент <output> позиционируется относительно якоря, который является ползунком слайдера диапазона.

HTML

Мы включаем элемент <input type="range"> и элемент <output> для отображения значения диапазона. Значение, отображаемое в элементе <output> , обновляется с помощью JavaScript по мере изменения значения слайдера.

<label for="slider">Change the value:</label>
<input type="range" min="0" max="100" value="25" id="slider" />
<output>25</output>

CSS

Мы придаём ползунку, представленному псевдоэлементом ::-webkit-slider-thumb, имя якоря --thumb. Затем мы устанавливаем это имя в качестве значения свойства <output> элемента position-anchor, и задаём ему значение position равное fixed. Эти шаги связывают <output> с ползунком.

Наконец, мы используем свойства left и top со значениями anchor() для позиционирования <output> относительно ползунка.

input::-webkit-slider-thumb {
  anchor-name: --thumb;
}

output {
  position-anchor: --thumb;
  position: absolute;
  left: anchor(right);
  bottom: anchor(top);
}

JavaScript

Мы включаем обработчик событий, который обновляет содержимое элемента <output> при изменении значения элемента <input>:

const input = document.querySelector("input");
const output = document.querySelector("output");

input.addEventListener("input", (event) => {
  output.innerText = `${input.value}`;
});

Результаты

Вывод привязан к ползунку. Измените значение. Если позиционирование по якорю поддерживается вашим браузером, значение будет отображаться над и справа от ползунка, независимо от его положения на слайдере.

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

HTML

У нас есть четыре якоря и два позиционированных элемента, отличающихся различными значениями id. Позиционированные элементы содержат выпадающие списки <select>, которые позволяют выбрать желаемый якорь для их связывания.

<div id="anchor-container">
  <div class="anchor" id="anchor1">⚓︎</div>
  <div class="anchor" id="anchor2">⚓︎</div>
  <div class="anchor" id="anchor3">⚓︎</div>
  <div class="anchor" id="anchor4">⚓︎</div>
</div>

<div class="infobox" id="infobox1">
  <form>
    <label for="anchor1-anchor-select">Place infobox on:</label>
    <select id="anchor1-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

<div class="infobox" id="infobox2">
  <form>
    <label for="anchor2-anchor-select">Place infobox on:</label>
    <select id="anchor2-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

CSS

Мы объявляем первый anchor <div> в качестве якоря, используя свойство anchor-name , которому заданы два через запятую имени якорей, по одному для каждого позиционированного элемента. Это начальное состояние демонстрации — оба позиционированных элемента привязаны к первому якорю.

#anchor1 {
  anchor-name: --myAnchor1, --myAnchor2;
}

Каждый из позиционированных элементов получает свойство position-anchor со значением, соответствующим одному из двух имён якорей. После этого позиционированным элементам задаются параметры позиционирования относительно якоря с помощью сочетания свойств вложенного расположения, выравнивания и отступов.

#infobox1 {
  position-anchor: --myAnchor1;
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --myAnchor2;
  position: fixed;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

JavaScript

Мы динамически изменяем, к каким элементам-якорям привязаны значения anchor-name , в ответ на выбор различных якорей в выпадающих меню позиционированных элементов <select>. Основная функциональность здесь — обработчик события change, updateAnchorNames(). Он устанавливает оба имени якорей на один якорь, если выбранные якоря в двух меню <select> одинаковые. В противном случае он устанавливает имя одного якоря на два отдельных якоря, как соответствующим образом.

// Get references to the two select menus
const select1 = document.querySelector("#anchor1-anchor-select");
const select2 = document.querySelector("#anchor2-anchor-select");
// Store references to all the anchors in a NodeList (array-like)
const anchors = document.querySelectorAll("#anchor-container > div");

// Set the same change event handler on both select menus
select1.addEventListener("change", updateAnchorNames);
select2.addEventListener("change", updateAnchorNames);

function updateAnchorNames() {
  // Remove all anchor names from all anchors
  for (const anchor of anchors) {
    anchor.style.anchorName = "none";
  }

  // convert the select menu values to numbers, and remove one to
  // make them match the selected anchors' index positions in the NodeList
  const value1 = Number(select1.value) - 1;
  const value2 = Number(select2.value) - 1;

  if (value1 === value2) {
    // If the chosen anchors are both the same, set both anchor
    // names on the same anchor
    anchors[value1].style.anchorName = "--myAnchor1, --myAnchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--myAnchor1";
    anchors[value2].style.anchorName = "--myAnchor2";
  }
}

Результат

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

• anchor-name
• Атрибут HTML anchor
• Модуль CSS позиционирования якорей
• Руководство по использованию CSS позиционирования якорей