position-try-fallbacks

可用性有限

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

position-try-fallbacks 這個 CSS 屬性可以指定一個或多個備選的定位嘗試回退選項列表，用於相對於其關聯的錨定元素放置錨定定位的元素。當該元素原本會溢位其經由內邊距調整的包含塊時，瀏覽器將按照提供的順序，嘗試將定位元素放置在這些不同的回退位置，直到找到一個可以使其不再溢位其容器或視口的值。

注意：可以使用 position-try 簡寫屬性在一個宣告中同時指定 position-try-order 和 position-try-fallbacks 的值。

注意：該屬性最初在 Chromium 瀏覽器中被命名並支援為 position-try-options，其屬性值相同。在 position-try-fallbacks 得到支援之前，請改用 position-try 簡寫。

語法

css

/* Default value: no try fallback options */
position-try-fallbacks: none;

/* Single try option */
position-try-fallbacks: flip-block;
position-try-fallbacks: top;
position-try-fallbacks: --custom-try-option;

/* Multiple value combination option */
position-try-fallbacks: flip-block flip-inline;

/* Multiple values */
position-try-fallbacks: flip-block, flip-inline;
position-try-fallbacks: top, right, bottom;
position-try-fallbacks: --custom-try-option1, --custom-try-option2;
position-try-fallbacks:
  flip-block,
  flip-inline,
  flip-block flip-inline;
position-try-fallbacks:
  flip-block,
  --custom-try-option,
  --custom-try-option flip-inline,
  right;

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

position-try-fallbacks 屬性可以指定為關鍵字值 none，或者是一個由逗號分隔的一個或多個以空格分隔的自定義定位選項名稱、<try-tactic> 或 position-area 值的列表。

值

none

預設值。沒有設定定位嘗試回退選項。

<try-tactic>

預定義的回退選項透過獲取定位元素的計算位置，並將其沿錨點的特定軸進行變換來移動元素，同時映象任何外邊距偏移。可能的值有：

flip-block: 沿塊軸翻轉元素的位置。
flip-inline: 沿內聯軸翻轉元素的位置。
flip-start: 同時翻轉內聯軸和塊軸的值，將 start 屬性相互交換，end 屬性相互交換。

position-area 值

根據指定的 <position-area> 值，將定位元素放置在隱式的 3x3 定位區域網格的一個或多個單元格上，從而相對於其關聯的錨定元素的邊緣進行定位；其效果等同於一個僅包含 position-area 描述符的自定義 @position-try 回退選項。

<dashed-ident>

向回退選項列表中新增一個自定義的 @position-try 選項，其標識名稱與指定的 dashed-ident 相匹配。如果不存在該名稱的自定義定位選項，則該選項將被忽略。

注意：可以指定多個選項，用逗號分隔。

描述

無論其錨點位於何處，只要有可能，錨定定位的元素都應出現在方便使用者互動的位置。為防止定位元素溢位視口，當其錨點靠近其包含元素或視口的邊緣時，通常需要改變其位置。

這可以透過在 position-try-fallbacks 屬性中提供一個或多個定位嘗試回退選項來實現。如果定位元素的初始位置會溢位，瀏覽器將嘗試每個回退定位選項；第一個不會導致元素溢位其包含塊的回退選項將被應用。預設情況下，瀏覽器會按照它們在列表中出現的順序進行嘗試，應用它找到的第一個能阻止定位元素溢位的選項。

如果沒有找到任何選項能將定位元素完全放置在螢幕上，瀏覽器將恢復到應用任何嘗試回退選項之前的預設位置來顯示定位元素。

注意：在某些情況下，你可能只想隱藏溢位的定位元素，這可以透過使用 position-visibility 屬性來實現。然而，在大多數情況下，最好將它們保留在螢幕上並保持可用。

有關錨定特性和定位嘗試回退用法的詳細資訊，請參閱 CSS 錨定定位模組的介紹頁面和溢位時的回退選項和條件隱藏指南。

預定義的 <try-tactic> 值

在規範中稱為 <try-tactic>，預定義的值透過獲取定位元素的計算位置並沿錨點的特定軸進行變換來移動它。預定義的值有：

flip-block: 沿塊軸翻轉元素的位置，使其與錨點保持相同的距離，但位於錨點的另一側。換句話說，它將元素的位置沿穿過錨點中心的內聯軸進行映象。例如，如果定位元素開始在錨點的頂部溢位，此值會將其位置翻轉到底部。
flip-inline: 沿內聯軸翻轉元素的位置，使其與錨點保持相同的距離，但位於錨點的另一側。換句話說，它將元素的位置沿穿過錨點中心的塊軸進行映象。例如，如果定位元素開始在錨點的左側溢位，此值會將其位置翻轉到右側。
flip-start: 沿穿過錨點中心的對角線軸映象元素的位置，該對角線穿過塊軸起點和內聯軸起點的交點，以及塊軸終點和內聯軸終點的交點。例如，如果定位元素開始在錨點的左側溢位，此值會將其翻轉到頂部。

組合選項

一個單獨的定位嘗試回退選項可以包含多個 <try-tactic> 或 dashed-ident 選項，或兩者的組合，只需將它們宣告為單個以空格分隔的選項即可：

對於多個預定義的 <try-tactic> 選項，它們的變換會組合在一起。
在宣告一個預定義的 <try-tactic> 和一個名為 <dashed-ident> 的 @position-try 選項的情況下，會首先應用自定義定位選項，然後再應用 <try-tactic> 變換。

position-area 值不能像這樣組合。

正式定義

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

正式語法

position-try-fallbacks = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}

示例

基本用法

此示例展示了幾個預定義的 <try-tactic> 回退選項的基本用法。

HTML

HTML 包含兩個 <div> 元素，它們將成為錨點和錨定定位的元素：

html

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

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

CSS

我們將 <body> 元素的樣式設定為非常大，以啟用水平和垂直滾動。

錨點被賦予一個 anchor-name 和較大的外邊距，以將其放置在 <body> 可見部分的中心附近：

.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

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

資訊框被賦予固定定位，以及一個引用錨點 anchor-name 的 position-anchor 屬性，以將兩者關聯起來，並使用 position-area 將其繫於錨點的左上角。

我們包含了一個 position-try-fallbacks 列表（並用 position-try 簡寫重新宣告它，以防完整屬性名尚不支援），提供了兩個預定義的定位嘗試回退選項，以防止當錨點靠近視口邊緣時，透過沿錨點的內聯軸或塊軸翻轉來避免溢位。

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try-fallbacks: flip-block, flip-inline;
  position-try: flip-block, flip-inline;
}

結果

這給了我們以下結果：

嘗試滾動，使錨點靠近邊緣：

如果將錨點移動到視口頂部附近，你將看到定位元素翻轉到錨點的左下方以避免溢位。
如果將錨點移動到視口左側附近，你將看到定位元素翻轉到錨點的右上方以避免溢位。

但是，如果將錨點移向視口的左上角，你會注意到一個問題——當定位元素開始在塊和內聯方向上溢位時，它會翻轉回其預設的左上角位置，並在兩個方向上都溢位，這不是我們想要的。

這是因為我們只給了瀏覽器 flip-block 或 flip-inline 的定位選項。我們沒有給它同時嘗試兩者的選項。下一個示例將向你展示如何解決這個問題。

將多個值組合成一個選項

讓我們使用一個組合的嘗試回退選項來解決我們在上一個演示中發現的問題。

HTML 和 CSS

此演示中的所有 HTML 和 CSS 都是相同的，除了定位元素的程式碼。在這種情況下，它被賦予了第三個定位嘗試回退選項：flip-block flip-inline。

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

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

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

結果

第三個定位嘗試回退選項意味著瀏覽器將首先嚐試 flip-block，然後嘗試 flip-inline 來避免溢位，如果這些回退失敗，它將把兩者結合起來，同時在塊和內聯方向上翻轉元素的位置。現在，當你將錨點滾動到視口的頂部和左側邊緣時，定位元素將翻轉到右下方。

`position-area` 嘗試回退選項

此示例展示了一些 position-area 定位嘗試回退選項的實際效果。

HTML 和 CSS

此演示中的所有 HTML 和 CSS 都是相同的，除了定位元素的程式碼。在這種情況下，我們的定位嘗試回退選項都是 position-area 值——top、top right、right、bottom right、bottom、bottom left 和 left。

這意味著無論錨點靠近哪個視口邊緣，定位元素都會找到一個合理的位置來顯示。這種方法比預定義值的方法更冗長一些，但也更精細和靈活。

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

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

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;

  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

結果

滾動頁面，並檢視當錨點靠近視口邊緣時，這些定位嘗試回退選項的效果。

自定義嘗試選項示例

請參閱 @position-try 參考頁面。

規範

規範
CSS 錨點定位 # position-try-fallbacks

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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