anchor-name

有限可用性

此功能不是基线，因为它在一些最常用的浏览器中不起作用。

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

anchor-name CSS 属性允许通过为元素赋予一个或多个标识符锚点名称来将元素定义为锚点元素。然后，可以将每个名称设置为定位元素的position-anchor 属性的值，以将其与锚点相关联。

语法

css

/* 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 属性提供了关联。

锚点元素接受一个或多个通过anchor-name 属性设置的<dashed-ident> 锚点名称。当其中一个名称被设置为具有position 设置为absolute 或fixed 的元素的position-anchor 属性的值时，这两个元素就会关联。通过相对于锚点设置关联元素上的位置，这两个元素就被绑定在一起，使其成为“锚点定位”元素。

如果多个锚点元素设置了相同的锚点名称，并且该名称被定位元素的position-anchor 属性值引用，则该定位元素将与源代码顺序中最后一个具有该锚点名称的锚点元素关联。

锚点定位会更改包含块的锚点定位元素，使其position 相对于其锚点，而不是相对于最近的定位祖先元素。

要将定位元素绑定并在相对于锚点元素的特定位置进行放置，需要使用锚点定位功能，例如anchor() 函数（设置在内边距属性的值中）或position-area 属性。

如果锚点隐藏，例如使用display: none 或visibility: hidden，或者如果锚点是由于另一个元素设置了content-visibility: hidden 导致的跳过内容的一部分，则无法将定位元素与锚点元素关联。

anchor-name 属性支持所有生成主框的元素。这意味着伪元素，包括使用 ::before 和 ::after 创建的生成内容，以及 range 输入滑块 (::-webkit-slider-thumb) 等 UI 功能可以是锚元素。除非另有说明，否则伪元素隐式地锚定到与伪元素的原始元素相同的元素。

有关锚功能和用法的更多信息，请参阅 CSS 锚定位模块登录页面和使用 CSS 锚定位指南。

正式定义

初始值	`none`
应用于	所有生成主框的元素
继承	否
计算值	按指定
动画类型	离散

正式语法

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

示例

基本用法

此示例将一个定位元素绑定到一个锚点，将元素定位在锚点的右侧。

HTML

我们指定了两个 <div> 元素；一个带有 anchor 类的锚元素和一个带有 infobox 类的定位元素。

我们还包含了两个 <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">⚓︎</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-name 属性为其设置锚点名称，将 anchor <div> 声明为锚元素

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

css

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

我们通过将锚元素的锚点名称设置为定位元素的 position-anchor 属性的值来将第二个 <div> 与锚元素关联。然后，我们设置定位元素的

position 属性为 fixed，将其转换为锚点定位元素，以便它可以相对于锚点在页面上的位置进行定位。
left 和 top 属性为 anchor() 函数，其值为 right 和 top。这将信息框的左边缘与锚点的右边缘对齐，其顶边缘与锚点的顶边缘对齐。
margin-left 为 10px，在锚点定位元素与其锚点之间创建空间。

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

css

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

结果

滚动页面以查看信息框是如何相对于锚点定位的。当锚点向上滚动时，定位元素会随之移动。

多个定位元素

此示例演示了如何将多个定位元素与一个锚点关联。

HTML

HTML 与上一个示例相同，只是这次我们有多个定位元素 <div>，它们有不同的 id 来标识它们。

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

我们使用 anchor-name 属性将 anchor <div> 声明为锚元素，与之前一样，为其赋予一个锚点名称。

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

css

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

这两个定位元素中的每一个都通过将锚元素的锚点名称设置为定位元素的 position-anchor 属性值来与锚元素关联。它们也被赋予了 fixed 定位，使其成为锚点定位元素。然后，使用上述内边距属性组合以及 align-self / justify-self 属性与 anchor-center 值相结合，将定位元素相对于锚点定位在不同的位置，分别将信息框居中对齐到锚点在内联/块方向上的中心。

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

css

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

结果

滚动页面以查看两个信息框是如何与锚点绑定的。

多个锚点名称

此示例演示了如何让一个锚元素拥有多个锚点名称。

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 #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.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 锚定位 # 名称

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。