anchor глобальный атрибут HTML

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

Примеры

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

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

HTML

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

Кроме того, мы добавляем текст-заполнитель вокруг этих двух элементов <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" 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, чтобы создать пространство между элементом с позиционированием относительно якоря и самим якорем.

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

Результат

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

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

В настоящее время этот атрибут не входит в спецификацию HTML. Ознакомьтесь с обсуждением добавления атрибута anchor по адресу https://github.com/whatwg/html/pull/9144.

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

См. также

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