Свойство CSS `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 поддерживается всеми элементами, которые создают principal box. Это означает, что якорными элементами могут быть псевдоэлементы, включая сгенерированное содержимое, созданное с помощью ::before и ::after, а также элементы интерфейса, например бегунок элемента ввода range (::-webkit-slider-thumb). Псевдоэлементы неявно привязаны к тому же элементу, что и исходный элемент псевдоэлемента, если не указано иное.

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

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

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

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:

body {
  width: 50%;
  margin: 0 auto;
}

.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;
}

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

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

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

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

.infobox {
  position-anchor: --my-anchor;
  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, как и раньше задавая ему якорное имя.

body {
  width: 50%;
  margin: 0 auto;
}

.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;
}

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

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

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

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

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

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

Результат

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

Несколько якорных имён

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

HTML

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">⚓︎</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

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

body {
  width: 50%;
  margin: 0 auto;
}

.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;
}

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

.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;
}

Результат

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

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

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

См. также

• position-anchor
• anchor-scope
• Атрибут HTML anchor
• Модуль якорного позиционирования CSS
• Руководство «Использование якорного позиционирования CSS»