Свойство CSS `position-anchor`

Свойство position-anchor CSS задаёт элемент привязки по умолчанию для позиционируемого элемента. Это значение по умолчанию используется свойствами position-area и position-try, а также функциями привязки (anchor() и anchor-size()), если этим функциям не передан аргумент <anchor-name>.

Синтаксис

/* Single values */
position-anchor: normal;
position-anchor: auto;
position-anchor: none;
position-anchor: --anchor-name;
position-anchor: match-parent;

/* Global values */
position-anchor: inherit;
position-anchor: initial;
position-anchor: revert;
position-anchor: revert-layer;
position-anchor: unset;

Значения

normal

Если position-area имеет значение none, оно ведёт себя как none. В противном случае оно ведёт себя как auto.

auto

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

none

Позиционируемый элемент не связан с элементом привязки.

<dashed-ident>

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

match-parent

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

Описание

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

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

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

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

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

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

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

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

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

Формальное определение

Формальный синтаксис

position-anchor = 
  normal |
  auto |
  none |
  <anchor-name> |
  match-parent

<anchor-name> = 
  <dashed-ident>

Примеры

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

Несколько позиционируемых элементов и привязок

В этом примере можно перемещать несколько позиционируемых элементов, связывая их с разными привязками. Пример показывает, как одна привязка может быть связана с несколькими позиционируемыми элементами, но позиционируемый относительно привязки элемент может быть связан только с одной привязкой одновременно — той, которая задана свойством 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, которому задаём два разделённых запятой имени привязки — по одному для каждого позиционируемого элемента. Это начальное состояние демонстрации: оба позиционируемых элемента будут привязаны к первой привязке.

body {
  height: 100vh;
}

#anchor-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

#anchor1 {
  anchor-name: --my-anchor1, --my-anchor2;
}

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  width: 120px;
}

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

#infobox2 {
  position-anchor: --my-anchor2;
  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 = "--my-anchor1, --my-anchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--my-anchor1";
    anchors[value2].style.anchorName = "--my-anchor2";
  }
}

Результат

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

Использование ползунка в качестве привязки

В этом примере элемент <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 и ::-moz-range-thumb, имя привязки --thumb. Затем задаём это имя в качестве значения свойства position-anchor элемента <output> и устанавливаем для него значение position fixed. Эти действия связывают элемент <output> с бегунком.

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

body {
  display: grid;
  place-items: center;
  height: 100vh;
  font-size: 1.4rem;
  font-family: sans-serif;
}
input {
  width: 33vw;
}
output {
  background: cyan;
  border: 2px solid darkblue;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 1.2rem;
}

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

input::-moz-range-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-name
• anchor-scope
• Атрибут HTML anchor
• Модуль позиционирования относительно привязки в CSS
• Руководство «Использование позиционирования относительно привязки в CSS»