anchor

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

¥The anchor global attribute is used to associate a positioned element with an anchor element. The attribute's value is the id value of the element you want to anchor the positioned element to. The element can then be positioned using CSS anchor positioning.

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

¥Note: Alternatively, you can associate a positioned element with an anchor element via CSS, using the anchor-name and position-anchor properties. If both anchoring techniques are used on the same element, the CSS technique takes precedence over the HTML technique.

示例

¥Examples

基本 anchor 属性用法

¥Basic anchor attribute usage

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

¥The following example uses HTML to associate a positioned element with an anchor. CSS is then used to tether the positioned element to the right of the anchor.

HTML

我们创建一个 <div> 元素，其 id 为 example-anchor。这是我们的锚元素。然后我们包含另一个 <div>，并将 anchor 属性设置为 example-anchor。这将第一个 <div> 指定为第二个 <div> 的锚点，将两者关联在一起。

¥We create a <div> element with an id of example-anchor. This is our anchor element. We then include another <div> with the anchor attribute set to example-anchor. This designates the first <div> as the anchor for the second <div>, associating the two together.

我们还在两个 <div> 周围添加了一些填充文本，以使 <body> 更高，以便它可以滚动。

¥We also include some filler text around the two <div>s to make the <body> taller so that it will scroll.

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
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 将 infobox 元素转换为锚点定位元素，并将其相对于锚点定位。我们设置它：

¥We use CSS to convert the infobox element into an anchor-positioned element and position it relative to its anchor. We set its:

  • position 属性到 fixed，将其转换为定位元素，以便可以相对于锚点的位置进行定位。
  • left 属性到值为 right 的 anchor() 函数。这会将定位元素绑定到其锚点，将其左边缘定位到锚点的右边缘。
  • align-self 属性到 anchor-center。这会导致信息框在内联方向上与锚点的中心对齐。
  • margin-left 到 10px，在锚点定位元素和其锚点之间创建空间。
css
.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

结果

¥Result

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

¥Scroll the example to see how the infobox is tethered to the anchor. When the anchor attribute is supported, the infobox will be fixed to the right of the anchor. If not supported, the infobox will be fixed to the viewport.

规范

¥Specifications

此属性目前不是 HTML 规范的一部分。阅读有关在 https://github.com/whatwg/html/pull/9144 处添加 anchor 属性的讨论。

¥This attribute is not currently part of the HTML specification. Read the discussion about adding the anchor attribute at https://github.com/whatwg/html/pull/9144.

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also