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 上檢視此頁面 • 報告此內容的問題