anchor

非标准：此功能是非标准的，并且不在标准跟踪中。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

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

anchor 全局属性用于将定位元素与锚元素关联。属性的值是您要将定位元素锚定到的元素的id值。然后可以使用CSS 锚点定位来定位该元素。

注意：或者，您可以通过 CSS 将定位元素与锚元素关联，使用anchor-name和position-anchor属性。如果在同一元素上同时使用两种锚定技术，则 CSS 技术优先于 HTML 技术。

示例

基本anchor属性用法

以下示例使用 HTML 将定位元素与锚点关联。然后使用 CSS 将定位元素系在锚点的右侧。

HTML

我们创建一个具有id为example-anchor的<div>元素。这是我们的锚元素。然后我们包含另一个<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属性为一个带有right值的anchor()函数。这将定位元素与它的锚点绑定，使其左边缘与锚点的右边缘对齐。
  • align-self属性为anchor-center。这将导致 infobox 在内联方向上相对于锚点的中心居中对齐。
  • margin-left设置为10px，在锚点定位元素与其锚点之间创建间距。
css
.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

结果

滚动示例以查看 infobox 如何与锚点绑定。当支持anchor属性时，infobox 将固定在锚点的右侧。如果不支持，infobox 将固定到视口。

规范

此属性目前不是 HTML 规范的一部分。请阅读关于添加anchor属性的讨论，网址为https://github.com/whatwg/html/pull/9144。

浏览器兼容性

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

另请参阅