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 属性在所有生成主盒（principal box）的元素上都受支持。这意味着伪元素，包括使用 ::before 和 ::after 创建的生成内容，以及 UI 特性，如 range input 的滑块（::-webkit-slider-thumb），都可以作为锚点元素。除非另有指定，否则伪元素会隐式地锚定到与伪元素源自的元素相同的元素上。

有关锚点特性和用法的更多信息，请参阅 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: --my-anchor;
}

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

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

css

.infobox {
  position-anchor: --my-anchor;
  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: --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;
}

css

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

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 锚点定位 # name

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 8 月 13 日⁩，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题