anchor()

可用性有限

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

anchor() CSS 函式可用於錨點定位元素的內邊距屬性值中，返回一個相對於其關聯錨點元素邊緣位置的長度值。

語法

css

/* side or percentage */
top: anchor(bottom);
top: anchor(50%);
top: calc(anchor(bottom) + 10px)
inset-block-end: anchor(start);

/* side of named anchor */
top: anchor(--my-anchor bottom);
inset-block-end: anchor(--my-anchor start);

/* side of named anchor with fallback */
top: anchor(--my-anchor bottom, 50%);
inset-block-end: anchor(--my-anchor start, 200px);
left: calc(anchor(--my-anchor right, 0%) + 10px);

引數

anchor() 函式的語法如下：

anchor(<anchor-name> <anchor-side>, <length-percentage>)

引數為：

<anchor-name> 可選

你希望元素的一側相對於其定位的錨點元素的 anchor-name 屬性值。這是一個 <dashed-ident> 值。如果省略，則使用元素的預設錨點，該錨點在其 position-anchor 屬性中引用，或透過 anchor HTML 屬性與元素關聯。

備註： 在 anchor() 函式中指定 <anchor-name> 並不會將元素與錨點關聯；它只是相對於該錨點定位元素。仍然需要使用 position-anchor CSS 屬性或 anchor HTML 屬性來建立關聯。

<anchor-side>

指定錨點的一側，或距離 start 側的相對距離，元素將相對於該側進行定位。如果使用的物理或邏輯值與設定 anchor() 的內邊距屬性不相容，則會使用回退值。有效值包括：

top: 錨點元素的頂部。
right: 錨點元素的右側。
bottom: 錨點元素的底部。
left: 錨點元素的左側。
inside: 與內邊距屬性相同的一側。
outside: 與內邊距屬性相反的一側。
start: 錨點元素的包含塊沿設定 anchor() 函式的內邊距屬性軸的邏輯起點。
end: 錨點元素的包含塊沿設定 anchor() 函式的內邊距屬性軸的邏輯終點。
self-start: 錨點元素的內容沿設定 anchor() 函式的內邊距屬性軸的邏輯起點。
self-end: 錨點元素的內容沿設定 anchor() 函式的內邊距屬性軸的邏輯終點。
center: 設定 anchor() 函式的內邊距屬性軸的中心。
<percentage>: 以百分比形式指定距離元素內容沿設定 anchor() 函式的內邊距屬性軸的起點的距離。

<length-percentage> 可選

指定一個回退值，當 anchor() 函式因其他原因無效時，該函式應解析為此值。

描述

anchor() 函式可以相對於錨點元素的邊緣定位一個元素。它僅在絕對定位或固定定位元素的內邊距屬性值中有效。

它返回一個 <length> 值，指定了由內邊距值指定的錨點定位元素的邊與由所選 <anchor-side> 值指定的錨點元素的邊之間的距離。由於它返回一個 <length>，因此可以在接受長度值的其他 CSS 函式中使用，包括 calc()、clamp() 等。

如果不存在由 <anchor-name> 指定名稱的錨點，或者定位元素沒有與之關聯的錨點（即透過 position-anchor 屬性），則第一個引數被視為無效，如果可用，將使用回退 <length-percentage> 值。例如，如果在定位元素上指定了 top: anchor(bottom, 50px) 但沒有與之關聯的錨點，則將使用回退值，因此 top 將獲得一個 50px 的計算值。

有關錨點特性的詳細資訊和用法，請參閱 CSS 錨點定位模組登入頁和使用 CSS 錨點定位指南。

接受 `anchor()` 函式值的屬性

接受 anchor() 函式作為值元件的 CSS 內邊距屬性包括：

內邊距屬性和 `<anchor-side>` 值的相容性

在內邊距屬性值中使用 anchor() 函式時，anchor() 函式內部指定的 <anchor-side> 引數必須與內邊距屬性所在的軸相容。

這意味著，如果屬性與 <anchor-side> 具有相同的軸方向，則物理 <anchor-side> 值可以在物理內邊距屬性的值中使用。換句話說，top 和 bottom 邊在 left 和 right 屬性值中無效，而 left 和 right 邊在 top 和 bottom 屬性值中無效。例如，top: anchor(bottom) 是可以的，因為它們都是垂直值，但 top: anchor(left) 是無效的，因為 left 是水平值。如果指定了 top: anchor(left, 50px)，則會使用回退值，因此 top 將獲得 50px 的計算值。如果沒有回退值，則內邊距屬性的行為就像設定為 auto 一樣。

你可以在邏輯和物理內邊距屬性中使用邏輯 <anchor-side> 值，因為邏輯 <anchor-side> 值是相對於內邊距屬性的相關軸的，無論該屬性是邏輯的還是物理的。例如，top: anchor(start)、top: anchor(self-end)、inset-block-start: anchor(end) 和 inset-inline-end: anchor(self-start) 都可以正常工作。

在邏輯內邊距屬性值中使用物理 <anchor-side> 引數時，情況會變得更加複雜，因為物理邊必須與內邊距屬性在當前書寫模式下相關的軸相匹配。例如：

在水平書寫模式中，塊方向是從上到下，因此 inset-block-end: anchor(bottom) 可以工作，但 inset-block-end: anchor(left) 不相容。如果設定了 inset-block-end: anchor(left, 50px)，計算值將為 50px，並且定位元素將被定位在其最近的定位祖先或視口的塊末端（底部）50px 的位置，具體取決於設定的 position 值。
在垂直書寫模式中，塊方向是從右到左或從左到右，因此 inset-block-end: anchor(left) 可以工作，但 inset-block-end: anchor(top) 不相容。如果設定了 inset-block-end: anchor(top, 50px)，計算值將為 50px，並且定位元素將被定位在其最近的定位祖先或視口的塊末端（取決於書寫模式是左還是右）50px 的位置，具體取決於設定的 position 值。

為減少這些值可能帶來的混淆，建議將邏輯內邊距屬性與邏輯 <anchor-side> 值一起使用，將物理內邊距屬性與物理 <anchor-side> 值一起使用。應儘可能優先使用邏輯值，因為它們對國際化更有利。

center 和 <percentage> 值在所有邏輯和物理內邊距屬性的 anchor() 函式中都有效。

下表列出了內邊距屬性以及與之相容的 <anchor-side> 引數值。我們只列出了內邊距屬性的完整寫法；這些構成了內邊距屬性簡寫值。

內邊距屬性	相容的 `<anchor-side>` 值
全部	`center`
全部	`<percentage>`
`top` 和 `bottom`	`top`、`bottom`、`start`、`end`、`self-start`、`self-end`
`left` 和 `right`	`left`、`right`、`start`、`end`、`self-start`、`self-end`
`inset-block-start` 和 `inset-block-end`	`start`、`end`、`self-start` 和 `self-end` 水平書寫模式下的 `top` 和 `bottom` 垂直書寫模式下的 `left` 和 `right`
`inset-inline-start` 和 `inset-inline-end`	`start`、`end`、`self-start` 和 `self-end` 水平書寫模式下的 `left` 和 `right` 垂直書寫模式下的 `top` 和 `bottom`

使用 `anchor()` 定位彈出框

當使用 anchor() 定位彈出框時，請注意彈出框的預設樣式可能會與你試圖實現的位置衝突。通常的問題是 margin 和 inset 的預設樣式，因此建議重置它們：

css

.positionedPopover {
  margin: 0;
  inset: auto;
}

CSS 工作組正在尋找避免需要這種變通方法的方法。

在 `calc()` 中使用 `anchor()`

當 anchor() 函式引用預設錨點的一側時，你可以包含一個 margin 來在錨點和定位元素的邊緣之間建立所需的間距。或者，你可以在 calc() 函式中包含 anchor() 函式來新增間距。

此示例將定位元素的右邊緣與錨點元素的左邊緣對齊，然後新增 margin 以在邊緣之間留出一些空間：

css

.positionedElement {
  right: anchor(left);
  margin-left: 10px;
}

此示例將定位元素的邏輯塊末端邊緣定位在距離錨點元素邏輯塊起始邊緣 10px 的位置：

css

.positionedElement {
  inset-block-end: calc(anchor(start) + 10px);
}

相對於多個錨點定位元素

你可以透過在同一元素的不同內邊距屬性的 anchor() 函式中指定不同的 <anchor-name> 值來相對於多個錨點定位一個元素（參見下面的相對於多個錨點定位的元素）。這可以用於建立有用的功能，例如在定位元素的角上建立可用於調整其大小的拖動手柄。

雖然一個定位元素可以相對於多個錨點元素進行定位，但它只與透過其 position-anchor 屬性（或 anchor HTML 屬性）定義的單個錨點相關聯。這是該元素在頁面滾動時將隨之滾動的錨點；它還可以用於控制該元素何時有條件地隱藏。

正式語法

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<length-percentage> = 
  <length>      |
  <percentage>

示例

常見用法

在此示例中，anchor() 函式透過將底部和頂部邊緣設定為錨點的底部和頂部邊緣，來將錨點定位元素的高度設定為其錨點的高度。然後，在 calc() 函式中使用 anchor() 函式來使錨點定位元素與其錨點產生偏移。

HTML

我們包含一個 <div> 元素，我們將其設定為我們的錨點，以及一個 <p> 元素，我們將相對於該錨點進行定位：

html

<div class="anchor">⚓︎</div>

<p class="positionedElement">This is a positioned element.</p>

CSS

我們將錨點元素的 anchor-name 值設定為定位元素的 position-anchor 屬性的值以關聯元素，然後在錨點定位元素上設定三個內邊距屬性。前兩個將元素的頂部邊緣與錨點的頂部邊緣對齊，底部邊緣與錨點的底部邊緣對齊。在第三個內邊距屬性中，anchor() 函式在 calc() 函式中使用，以將元素的左邊緣定位到錨點右邊緣右側 10px 的位置。

css

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
}

.positionedElement {
  position: absolute;
  position-anchor: --infobox;
  margin: 0;
  top: anchor(top);
  left: calc(anchor(right) + 10px);
  bottom: anchor(bottom);
  background-color: olive;
  border: 1px solid darkolivegreen;
}

結果

不同 anchor-side 值的比較

此示例展示了一個透過其 top 和 left 屬性相對於一個錨點定位的元素，這些屬性是使用 anchor() 函式定義的。它還包括兩個下拉選單，允許你改變這些 anchor() 函式內的 <anchor-side> 值，這樣你就可以看到它們的效果。

HTML

我們指定了兩個 <div> 元素，一個帶有 anchor 類，一個帶有 infobox 類。它們分別用作錨點元素和我們將與之關聯的定位元素。

我們還在兩個 <div> 元素周圍添加了一些填充文字，以使 <body> 更高，從而使其可以滾動。此示例還包括兩個 <select> 元素，用於建立下拉選單，以便選擇不同的 <anchor-side> 值來放置定位元素。為簡潔起見，我們隱藏了填充文字和 <select> 元素。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

html

<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>

<form>
  <div>
    <label for="top-anchor-side">
      Choose a vertical <code>anchor()</code> value:
    </label>
    <select id="top-anchor-side" name="top-anchor-side">
      <option value="top">top: anchor(top)</option>
      <option value="bottom" selected>top: anchor(bottom)</option>
      <option value="start">top: anchor(start)</option>
      <option value="end">top: anchor(end)</option>
      <option value="center">top: anchor(center)</option>
      <option value="0%">top: anchor(0%)</option>
      <option value="25%">top: anchor(25%)</option>
      <option value="50%">top: anchor(50%)</option>
      <option value="75%">top: anchor(75%)</option>
      <option value="100%">top: anchor(100%)</option>
    </select>
  </div>
  <div>
    <label for="left-anchor-side">
      Choose a horizontal <code>anchor()</code> value:
    </label>
    <select id="left-anchor-side" name="left-anchor-side">
      <option value="left">left: anchor(left)</option>
      <option value="right" selected>left: anchor(right)</option>
      <option value="self-start">left: anchor(self-start)</option>
      <option value="self-end">left: anchor(self-end)</option>
      <option value="center">left: anchor(center)</option>
      <option value="0%">left: anchor(0%)</option>
      <option value="25%">left: anchor(25%)</option>
      <option value="50%">left: anchor(50%)</option>
      <option value="75%">left: anchor(75%)</option>
      <option value="100%">left: anchor(100%)</option>
    </select>
  </div>
</form>

CSS

我們透過 anchor-name 屬性在其上設定一個錨點名稱，將 anchor <div> 宣告為錨點元素。然後，我們透過為其 position-anchor 屬性設定相同的值，將其與定位元素關聯。top: anchor(--my-anchor bottom) 將資訊框的頂部邊緣與其錨點的底部邊緣對齊，而 left: anchor(right) 將資訊框的左邊緣與其錨點的右邊緣對齊。這提供了一個初始位置，當從下拉選單中選擇不同值時，該位置將被覆蓋。

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

body {
  width: 80%;
  margin: 0 auto;
}

form {
  background: white;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
  top: 0;
  right: 2px;
}

select {
  display: block;
  margin-top: 5px;
}

form div:last-child {
  margin-top: 10px;
}

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

css

.anchor {
  anchor-name: --my-anchor;
}

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(--my-anchor bottom);
  left: anchor(right);
}

JavaScript

我們監聽選擇新的 <anchor-side> 值時發生的 change 事件，並將所選值設定為資訊框相關內邊距屬性（top 或 left）值中 anchor() 函式內的 <anchor-side>。

const infobox = document.querySelector(".infobox");
const topSelect = document.querySelector("#top-anchor-side");
const leftSelect = document.querySelector("#left-anchor-side");

topSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.top = `anchor(--my-anchor ${anchorSide})`;
});

leftSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.left = `anchor(${anchorSide})`;
});

結果

從下拉選單中選擇不同的值，看看它們如何影響資訊框的定位。

相對於多個錨點定位的元素

此示例將一個元素相對於兩個不同的錨點進行定位，這兩個錨點用於設定錨點定位元素的左上角和右下角的位置。這些錨點可以透過鍵盤控制或拖動來移動，從而調整定位元素的大小。

HTML

我們總共指定了三個 <div> 元素。前兩個帶有 anchor 類，將被定義為錨點；每個都有一個單獨的 id，用於為它們提供不同的定位資訊。最後一個 <div> 帶有 infobox 類，將被定義為定位元素。我們包含 tabindex 屬性，以使它們能夠接收鍵盤焦點。

html

<div id="anchor1" class="anchor" tabindex="0">⚓︎1</div>

<div id="anchor2" class="anchor" tabindex="0">⚓︎2</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

body {
  width: 150vw;
  height: 150vh;
}

.anchor {
  font-size: 1rem;
  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;
  &:focus {
    background-color: hsl(60 100% 75%);
  }
}

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

每個錨點都被賦予了不同的 anchor-name 值，一個 position 值為 absolute，以及不同的內邊距值，以將錨點定位成一個矩形。

css

.anchor {
  position: absolute;
}

#anchor1 {
  anchor-name: --my-anchor1;
  top: 50px;
  left: 100px;
}

#anchor2 {
  anchor-name: --my-anchor2;
  top: 200px;
  left: 350px;
}

錨點定位元素的 position 設定為 fixed，透過其 position-anchor 屬性與一個錨點相關聯。透過在其內邊距屬性上設定的 anchor() 函式中包含兩個不同的 <anchor-name> 值，它相對於兩個錨點進行定位。在這種情況下，我們為 <anchor-side> 引數使用了<percentage> 值，指定了從函式設定的內邊距屬性軸的起點開始的距離。

css

.infobox {
  position-anchor: --my-anchor1;
  position: fixed;
  top: anchor(--my-anchor1 100%);
  left: anchor(--my-anchor1 100%);
  bottom: anchor(--my-anchor2 0%);
  right: anchor(--my-anchor2 0%);
}

// grab all the anchors and make each one draggable
const anchors = document.querySelectorAll(".anchor");
anchors.forEach((anchor) => makeDraggable(anchor));

function makeDraggable(elem) {
  let pos1, pos2, pos3, pos4;

  elem.onmousedown = dragMouseDown;
  elem.addEventListener("keyup", (e) => {
    switch (e.key) {
      case "d":
        elem.style.left = `${elem.offsetLeft + 5}px`;
        break;
      case "a":
        elem.style.left = `${elem.offsetLeft - 5}px`;
        break;
      case "w":
        elem.style.top = `${elem.offsetTop - 5}px`;
        break;
      case "s":
        elem.style.top = `${elem.offsetTop + 5}px`;
        break;
    }
    e.preventDefault();
  });

  function elementMove(e) {
    console.dir(e);
    // calculate the new cursor position:
    pos1 = pos3 - e.offsetLeft;
    pos2 = pos4 - e.offsetTop;
    pos3 = e.offsetLeft;
    pos4 = e.offsetTop;
    // set the element's new position:
    elem.style.top = `${elem.offsetTop - pos2}px`;
    elem.style.left = `${elem.offsetLeft - pos1}px`;
  }

  function dragMouseDown(e) {
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the mouse moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elem.style.top = `${elem.offsetTop - pos2}px`;
    elem.style.left = `${elem.offsetLeft - pos1}px`;
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

結果

定位元素相對於兩個錨點元素進行定位。用滑鼠拖動它們，或者按 Tab 鍵切換到它們，然後使用 W、A、S 和 D 鍵向上、下、左、右移動它們。看看這如何改變它們的位置，以及因此改變定位元素的區域。滾動頁面，看看所有元素的位置是如何保持的。

注意： 此示例是一個概念驗證，不適用於生產程式碼。其缺點之一是，如果你試圖將錨點水平或垂直地移動過彼此，示例就會中斷。

規範

規範
CSS 錨點定位 # anchor-pos

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁最後修改於 ⁨2025 年 10 月 10 日⁩，由 MDN貢獻者撰寫。

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