Una Kravets
發布日期：2025 年 10 月 29 日
從 Chrome 143 開始，您可以使用錨定容器查詢，判斷錨定元素是否使用備用錨定位置。這篇文章說明這項功能解決的問題。
CSS 錨點定位 API 提供強大的方式，可將元素 (例如彈出式視窗) 繫結至另一個元素 (錨點)，並定義一組位置嘗試後備選項，以防元素空間不足。舉例來說，如果錨定元素一開始的樣式是位於頂端，但捲動時會碰到螢幕邊緣，瀏覽器可以處理「翻轉」，將元素保留在可視區域中。
不過，錨點定位規格第 1 級留下了一個重大缺口：雖然 CSS 可以移動元素至備用位置，但無法得知選擇了哪個備用位置。這表示您無法根據最終位置套用不同樣式。如果工具提示從底部翻轉到頂部，除非您使用 JavaScript 修正，否則箭頭仍會指向錯誤的方向。
錨定容器查詢 (定義於 CSS 錨定位置第 2 級規格) 可解決這個問題，讓 CSS 錨定位置具備缺少的脈絡感知能力。
運作方式：查詢備用項
錨定容器查詢可讓您根據瀏覽器解析錨點位置的方式套用樣式。
這項設定採用兩項新的 CSS 功能：
container-type: anchored：將此屬性套用至已定位的元素 (例如工具提示)。這會將其轉換為「可感知」錨點定位狀態的查詢容器。@container anchored(fallback: ...)：這項新的 at 規則語法可讓您查詢最終使用的 position-try-fallbacks 選項。
假設您想將工具提示放在底部，但以頂部位置做為備案。下列程式碼：
- 一開始會嘗試將
.tooltip放置在錨點 (--my-anchor) 底部。 - 如果無法顯示，備用字型會將其移至頂端。
@container查詢會偵測到這項情況。套用頂層備援時，anchored(fallback: top)查詢會變成 true。- 這樣一來，您就能將 ::before 虛擬元素從「向上」箭頭 (▲) 變更為「向下」箭頭 (▼)，並調整其位置。
/* The element our tooltip is anchored to */
.anchor {
anchor-name: --my-anchor;
}
/* The positioned element (tooltip) */
.tooltip {
/* Use anchor positioning to set fallbacks */
position: absolute;
margin-top: 1rem;
position-anchor: --my-anchor;
position-area: bottom;
position-try-fallbacks: flip-block; /* Reposition in the block direction */
/* Make it an anchored query container */
container-type: anchored;
/* Add a default "up" arrow */
&::before {
content: '▲';
position: absolute;
bottom: 100%; /* Sits on top of the tooltip, pointing up */
}
}
/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
.tooltip::before {
/* The 'top' fallback was used, so flip the arrow */
content: '▼';
bottom: auto;
top: 100%; /* Move the arrow below the tooltip */
}
}
這一切都是以 CSS 完成，不需要 JavaScript、觀察程式或額外類別。注意：如果您使用 Popover API，就不需要明確命名錨點，因為系統會建立隱含的錨點關係。
請參閱下列示範，瞭解如何使用邊框間隔技巧建立 CSS 三角形，並使用錨定查詢重新定位三角形：
結論
錨定查詢可讓 CSS 瀏覽器原生瞭解定位元素的目前錨點位置。也就是說，您可以建構更具彈性且能感知情境的元件。工具提示箭頭只是一個例子，您也可以：
- 在選單翻轉時變更背景顏色。
- 將框線樣式移到最靠近錨點的邊緣。
- 調整快顯視窗的 border-radius，使「附加」的邊角為方形。
- 根據元素要貼齊的回退位置，以不同方式為元素製作動畫。
這對錨點定位和一般元件程式庫來說是一大福音，因為這樣一來，就能以更少的程式碼，打造更穩固且獨立的 UI 元素。