anchor

Нестандартно: Эта функция нестандартна и не соответствует стандартам. Не используйте её на производственных сайтах, ориентированных на веб: она не будет работать для всех пользователей. Также могут быть значительные несовместимости между реализациями, а поведение может измениться в будущем.

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

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

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

Примеры

Базовое использование атрибута `anchor`

В следующем примере используется HTML для связывания позиционируемого элемента с якорем. Затем используется CSS для привязки позиционируемого элемента к правому краю якоря.

HTML

Создаём элемент <div> с id example-anchor. Это наш элемент-якорь. Затем включаем другой элемент <div> с атрибутом anchor установленным в example-anchor. Это обозначает первый <div> как якорь для второго <div>, связывая их вместе.

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

html

<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" id="example-anchor">⚓︎</div>

<div class="infobox" anchor="example-anchor">
  <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

Мы используем CSS для преобразования элемента infobox в элемент, позиционируемый по якорю и позиционируем его относительно его якоря. Мы устанавливаем:

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

css

.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

Результат

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

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

Этот атрибут в настоящее время не входит в спецификацию HTML. Прочитайте обсуждение об добавлении атрибута anchor по адресу https://github.com/whatwg/html/pull/9144.

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`anchor`	превью	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет	Нет

См. также

HTMLElement.anchorElement
Свойство CSS anchor-name
Свойство CSS position-anchor
Модуль позиционирования по якорям CSS
Руководство по использованию позиционирования по якорям CSS

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