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 的瀏覽器中載入。

另請參閱