anchor-name

Ограниченное использование

Эта функция не относится к Базовому уровню, так как она не работает в некоторых из наиболее широко используемых браузеров.

Экспериментально: Это экспериментальная технология экспериментальная технология
Перед использованием в продакшене внимательно изучите таблицу совместимости браузеров.

Свойство anchor-name CSS позволяет определять элемент как элемент-якорь, присваивая ему одно или несколько идентификаторов имен якорей. Затем каждое имя можно установить в качестве значения свойства position-anchor позиционированного элемента, чтобы связать его с якорем.

Синтаксис

/* Single values */
anchor-name: none;
anchor-name: --name;

/* Multiple values */
anchor-name: --name, --another-name;

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

Значения

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

Описание

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

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

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

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

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

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

Свойство anchor-name поддерживается всеми элементами, генерирующими основной блок. Это означает, что псевдоэлементы, включая генерируемое содержимое, созданное с помощью ::before и ::after, а также такие UI-элементы, как ползунок range (::-webkit-slider-thumb), могут быть элементами-якорями. Псевдоэлементы неявно привязаны к тому же элементу, что и исходный элемент псевдоэлемента, если не указано иное.

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

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

Начальное значение	`none`
Применимо к	Все элементы, генерирующие основной блок
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

anchor-name = 
  none             |
  <dashed-ident>#

Примеры

Базовое использование

В этом примере показана привязка позиционированного элемента к якорю с позиционированием справа от якоря.

HTML

Мы определяем два элемента <div>; элемент-якорь с классом anchor и позиционированный элемент с классом infobox.

Мы также включили текст-заполнитель вокруг двух <div> чтобы сделать <body> выше, чтобы его можно было прокручивать.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

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

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

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

Сначала мы объявляем anchor <div> как элемент-якорь, установив имя якоря с помощью свойства anchor-name:

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

Мы связываем второй <div> с элементом-якорем, установив его имя якоря в качестве значения свойства position-anchor позиционированного элемента. Затем мы устанавливаем для позиционированного элемента:

position свойство в значение fixed, преобразуя его в элемент якорного позиционирования, чтобы его можно было позиционировать относительно позиции якоря на странице.
left и top свойства в функции anchor() со значениями right и top соответственно. Это позиционирует левый край инфобокса по правому краю его якоря, а верхний край – относительно верхнего края его якоря.
margin-left до значения 10px, создавая пространство между элементом якорного позиционирования и его якорем.

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

Результат

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

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

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

HTML

HTML такой же, как в предыдущем примере, за исключением того, что на этот раз у нас есть несколько позиционированных элементов <div> с разными id для их идентификации.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

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

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

<div class="infobox" id="infobox2">
  <p>This is another information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

Мы объявляем anchor <div> как элемент-якорь, используя свойство anchor-name, присваивая ему имя якоря, как и раньше.

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

Каждый из двух позиционированных элементов связывается с элементом-якорем путём установки имени якоря в качестве значения свойства position-anchor позиционированного элемента. Оба также получают позиционирование fixed, что делает их элементами якорного позиционирования. Позиционированные элементы затем размещаются в разных местах относительно якоря с помощью комбинации свойств отступов, как показано выше, и свойств align-self / justify-self со значением anchor-center, обеспечивая центрирование инфобокса по центру якоря по горизонтали и вертикали соответственно.

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

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

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

Результат

Прокрутите страницу, чтобы увидеть, как оба инфобокса привязаны к якорю.

END_OF_DOCUMENT_MARKER

Несколько имен якорей

В данном примере показано, как элемент якоря может иметь более одного имени якоря.

HTML

HTML такой же, как в предыдущем примере.

CSS

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

.anchor {
  anchor-name: --anchor1, --anchor2;
}

.infobox {
  position: fixed;
}

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

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

Результат

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

Спецификации

Спецификация
Позиционирование якорей CSS # name

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`anchor-name`	125	125	Нет	111	Нет	125	Нет	83	Нет	27.0	125
`none`	125	125	Нет	111	Нет	125	Нет	83	Нет	27.0	125

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/anchor-name