position-anchor

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

position-anchor CSS 屬性指定了定位元素所關聯的錨點元素（即透過 anchor-name 屬性設定了錨點名稱的元素）的錨點名稱。

語法

css

/* Single values */
position-anchor: auto;
position-anchor: --anchor-name;

/* Global values */
position-anchor: inherit;
position-anchor: initial;
position-anchor: revert;
position-anchor: revert-layer;
position-anchor: unset;

值

auto: 將定位元素與其隱式錨點元素（如果存在）相關聯——例如，透過非標準的 HTML anchor 屬性設定的錨點。
<dashed-ident>: 要與定位元素關聯的錨點元素的名稱，與錨點元素的 anchor-name 屬性中列出的名稱一致。這被稱為預設錨點指定符。

描述

此屬性僅與“定位”元素相關——即 position 設定為 absolute 或 fixed 的元素和偽元素。

要相對於錨點元素定位一個元素，該定位元素需要三個特性：關聯、位置和方位。position-anchor 和 anchor-name 屬性提供了顯式的關聯。

錨點元素接受透過 anchor-name 屬性設定的一個或多個 <dashed-ident> 錨點名稱。當其中一個名稱被設定為定位元素的 position-anchor 屬性的值時，這兩個元素就關聯起來了。

如果存在多個錨點元素具有 position-anchor 屬性中列出的錨點名稱，則定位元素將與原始碼順序中最後一個具有該錨點名稱的錨點元素相關聯。

要將定位元素繫結到其錨點，必須使用錨點定位特性將其相對於錨點元素放置，例如 anchor() 函式（作為內邊距屬性的值設定）或 position-area 屬性。

如果關聯的錨點被隱藏，例如透過 display: none 或 visibility: hidden，或者由於另一個元素設定了 content-visibility: hidden 而成為其跳過內容的一部分，則錨點定位的元素將不會顯示。

position-anchor 屬性支援所有被定位的元素，包括像 ::before 和 ::after 這樣的偽元素。除非另有指定，偽元素會隱式地錨定到與偽元素源元素相同的元素上。

有關錨點特性和用法的更多資訊，請參閱 CSS 錨點定位模組的介紹頁面和使用 CSS 錨點定位指南。

正式定義

初始值	`auto`
應用於	絕對定位的元素
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

position-anchor = 
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>

示例

請參閱 anchor-name 文件中的基本用法和額外的 position-anchor 示例。

使用滑塊的滑塊鈕作為錨點

在此示例中，一個 <output> 元素相對於一個作為範圍滑塊滑塊鈕的錨點進行定位。

HTML

我們包含一個 <input type="range"> 元素和一個 <output> 元素來顯示範圍滑塊的值。當滑塊值改變時，<output> 元素中顯示的值會透過 JavaScript 更新。

html

<label for="slider">Change the value:</label>
<input type="range" min="0" max="100" value="25" id="slider" />
<output>25</output>

CSS

我們將滑塊鈕（由 ::-webkit-slider-thumb 偽元素表示）賦予一個錨點名稱 --thumb。然後，我們將該名稱設定為 <output> 元素的 position-anchor 屬性的值，併為其指定一個 fixed 的 position 值。這些步驟將 <output> 與滑塊鈕關聯起來。

最後，我們使用帶有 anchor() 值的 left 和 top 屬性，將 <output> 相對於滑塊鈕進行定位。

body {
  display: grid;
  place-items: center;
  height: 100vh;
  font-size: 1.4rem;
  font-family: sans-serif;
}
input {
  width: 33vw;
}
output {
  background: cyan;
  border: 2px solid darkblue;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 1.2rem;
}

css

input::-webkit-slider-thumb {
  anchor-name: --thumb;
}

output {
  position-anchor: --thumb;
  position: absolute;
  left: anchor(right);
  bottom: anchor(top);
}

JavaScript

我們添加了一個事件監聽器，當 <input> 的值改變時，它會更新 <output> 元素的內容。

const input = document.querySelector("input");
const output = document.querySelector("output");

input.addEventListener("input", (event) => {
  output.innerText = `${input.value}`;
});

結果

輸出元素被錨定到滑塊鈕上。改變滑塊的值。如果你的瀏覽器支援錨點定位，無論滑塊鈕在滑塊的哪個位置，該值都會顯示在滑塊鈕的上方和右側。

多個定位元素和錨點

在這個例子中，你可以移動多個定位元素，將它們與不同的錨點相關聯。這個例子演示了一個錨點如何與多個定位元素相關聯，但一個錨點定位的元素一次只能與一個錨點相關聯，即由 anchor-position 屬性定義的錨點。

HTML

我們有四個錨點和兩個定位元素，用不同的 id 值來區分。定位元素包含 <select> 框，允許你選擇要與它們關聯的錨點。

html

<div id="anchor-container">
  <div class="anchor" id="anchor1">⚓︎</div>
  <div class="anchor" id="anchor2">⚓︎</div>
  <div class="anchor" id="anchor3">⚓︎</div>
  <div class="anchor" id="anchor4">⚓︎</div>
</div>

<div class="infobox" id="infobox1">
  <form>
    <label for="anchor1-anchor-select">Place infobox on:</label>
    <select id="anchor1-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

<div class="infobox" id="infobox2">
  <form>
    <label for="anchor2-anchor-select">Place infobox on:</label>
    <select id="anchor2-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

CSS

我們使用 anchor-name 屬性將第一個 anchor <div> 宣告為一個錨點，併為其賦予兩個逗號分隔的錨點名稱，每個定位元素一個。這是演示的初始狀態——兩個定位元素都將繫結到第一個錨點。

body {
  height: 100vh;
}

#anchor-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.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

#anchor1 {
  anchor-name: --my-anchor1, --my-anchor2;
}

每個定位元素都被賦予一個 position-anchor 屬性，其值與兩個錨點名稱之一匹配。然後，透過組合使用內邊距、對齊和外邊距屬性，為定位元素提供相對於錨點的位置資訊。

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  width: 120px;
}

css

#infobox1 {
  position-anchor: --my-anchor1;
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --my-anchor2;
  position: fixed;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

JavaScript

我們根據定位元素中 <select> 選單中選擇的不同錨點，動態地更改 anchor-name 值設定在哪個錨點元素上。這裡的關鍵功能是 change 事件處理器 updateAnchorNames()。如果兩個 <select> 選單中選擇的錨點相同，它會將兩個錨點名稱都設定在一個錨點上。否則，它會根據需要將單個錨點名稱分別設定在兩個不同的錨點上。

// Get references to the two select menus
const select1 = document.querySelector("#anchor1-anchor-select");
const select2 = document.querySelector("#anchor2-anchor-select");
// Store references to all the anchors in a NodeList (array-like)
const anchors = document.querySelectorAll("#anchor-container > div");

// Set the same change event handler on both select menus
select1.addEventListener("change", updateAnchorNames);
select2.addEventListener("change", updateAnchorNames);

function updateAnchorNames() {
  // Remove all anchor names from all anchors
  for (const anchor of anchors) {
    anchor.style.anchorName = "none";
  }

  // convert the select menu values to numbers, and remove one to
  // make them match the selected anchors' index positions in the NodeList
  const value1 = Number(select1.value) - 1;
  const value2 = Number(select2.value) - 1;

  if (value1 === value2) {
    // If the chosen anchors are both the same, set both anchor
    // names on the same anchor
    anchors[value1].style.anchorName = "--my-anchor1, --my-anchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--my-anchor1";
    anchors[value2].style.anchorName = "--my-anchor2";
  }
}

結果

從下拉選單中選擇不同的值，以更改元素定位所相對的錨點。

規範

規範
CSS 錨點定位 # position-anchor

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 8 月 13 日⁩，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題