@position-try
@position-try CSS @規則用於定義自定義位置嘗試回退選項，該選項可用於定義錨點定位元素的定位和對齊方式。一個或多個位置嘗試回退選項集可以透過 position-try-fallbacks 屬性或 position-try 簡寫應用於錨定元素。當定位元素移動到開始溢位其包含塊或視口的位置時，瀏覽器將選擇它找到的第一個位置嘗試回退選項，該選項將定位元素完全放回螢幕上。
每個位置選項都用 <dashed-ident> 命名，幷包含一個描述符列表，指定定義諸如內嵌位置、外邊距、大小和自對齊等資訊的宣告。<dashed-ident> 用於在 position-try-fallbacks 屬性和 position-try 簡寫中引用自定義位置選項。
有關錨點功能和位置嘗試回退用法的詳細資訊，請參閱 CSS 錨點定位模組著陸頁和 溢位時的回退選項和條件隱藏指南。
語法
@position-try --try-option-name {
descriptor-list
}
注意：--try-option-name 是一個 <dashed-ident>，用於指定自定義位置選項的標識名稱，然後可以使用該名稱將回退選項新增到 position-try-fallbacks 列表中。
描述符
描述符指定屬性值，這些屬性值定義自定義位置選項的行為，即它將導致定位元素放置的位置。
position-anchor-
指定
position-anchor屬性值，該值透過指定與錨點元素的anchor-name屬性值相等的<dashed-ident>值，來定義定位元素所錨定的錨點元素。 position-area-
指定
position-area屬性值，該值定義錨點定位元素相對於錨點的位置。 - 內嵌屬性描述符
-
指定
anchor()函式值，該值定義錨點定位元素的邊緣相對於錨點元素邊緣的位置。可以設定表示以下屬性的內嵌屬性描述符 - 外邊距屬性描述符
-
指定在錨點定位元素上設定的外邊距。可以設定表示以下屬性的外邊距屬性描述符
- 尺寸屬性描述符
-
指定
anchor-size()函式值，該值定義錨點定位元素相對於錨點元素的大小。可以設定表示以下屬性的尺寸屬性描述符 - 自對齊屬性描述符
-
指定
anchor-center值，以在塊或行內方向上將錨點定位元素相對於錨點元素的中心對齊。align-self和justify-self屬性描述符可以採用anchor-center值。
注意：當自定義位置選項應用於元素時，@position-try @規則描述符中定義的屬性值優先於透過標準 CSS 屬性在元素上設定的值。
正式語法
@position-try =
@position-try <dashed-ident> { <declaration-list> }
示例
自定義位置選項用法
在此示例中，我們定義了一個錨點元素和一個錨點定位元素，然後建立了四個命名自定義位置嘗試回退選項。這些選項應用於定位元素，以確保無論錨點元素在視口中的哪個位置，其內容始終可見。
HTML
我們包含兩個 <div> 元素，它們將成為錨點和錨點定位元素。
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
CSS
我們首先將 <body> 元素樣式設定得非常大，以便我們可以在視口中水平和垂直滾動錨點和定位元素。
body {
width: 1500px;
height: 500px;
}
錨點被賦予一個 anchor-name，並且其 position 值設定為 absolute。然後，我們使用 top 和 left 值將其定位在初始 <body> 渲染的中心附近。
.anchor {
anchor-name: --my-anchor;
position: absolute;
top: 100px;
left: 350px;
}
接下來，我們使用 @position-try @規則定義了四個自定義位置選項，並使用描述性的 <dashed-ident> 名稱來識別它們並描述其目的。每個選項都將定位元素放置在錨點元素周圍的特定位置，並在定位元素及其錨點之間提供適當的 10px 外邊距。定位以各種方式處理，以演示可用的不同技術。
- 第一個和最後一個位置選項使用
position-area。 - 第二個位置選項使用帶有
anchor()值的top和justify-self: anchor-center，以在行內方向上將定位元素在錨點上居中。 - 第三個位置選項使用帶有
anchor()值的left，包裝在一個calc()函式中，該函式新增10px的間距（而不是像其他選項那樣使用margin建立間距）。然後，它使用align-self: anchor-center在塊方向上將定位元素在錨點上居中。
最後，左右位置選項被賦予更窄的 width。
@position-try --custom-left {
position-area: left;
width: 100px;
margin-right: 10px;
}
@position-try --custom-bottom {
top: anchor(bottom);
justify-self: anchor-center;
margin-top: 10px;
position-area: none;
}
@position-try --custom-right {
left: calc(anchor(right) + 10px);
align-self: anchor-center;
width: 100px;
position-area: none;
}
@position-try --custom-bottom-right {
position-area: bottom right;
margin: 10px 0 0 10px;
}
資訊框被賦予固定定位，一個引用錨點 anchor-name 的 position-anchor 屬性以將兩者關聯起來，並且它使用 position-area 錨定到錨點的頂部邊緣。我們還給它一個固定的 width 和一些底部 margin。然後，自定義位置選項在 position-try-fallbacks 屬性中引用，以防止當錨點靠近視口邊緣時，定位元素溢位或被滾動出檢視。
.infobox {
position: fixed;
position-anchor: --my-anchor;
position-area: top;
width: 200px;
margin-bottom: 10px;
position-try-fallbacks:
--custom-left, --custom-bottom, --custom-right, --custom-bottom-right;
}
結果
滾動頁面，注意隨著錨點靠近視口的不同邊緣，定位元素的放置位置會發生變化。這是由於應用了不同的回退位置選項。
讓我們來討論一下這些位置選項是如何工作的
- 首先，請注意我們的預設位置由
position-area: top定義。當資訊框在任何方向上都沒有溢位頁面時，資訊框位於錨點上方，並且position-try-fallbacks屬性中設定的位置嘗試回退選項將被忽略。另請注意，資訊框具有固定的寬度和底部外邊距。這些值將隨著應用不同的位置嘗試回退選項而改變。 - 如果資訊框開始溢位，瀏覽器首先嚐試
--custom-left位置。這使用position-area: left將資訊框移動到錨點左側，調整外邊距以適應，併為資訊框設定不同的寬度。 - 接下來，瀏覽器嘗試
--custom-bottom位置。這使用top和justify-self而不是position-area將資訊框移動到錨點底部，並設定適當的外邊距。它不包含width描述符，因此資訊框返回到由width屬性設定的預設寬度200px。 - 瀏覽器接下來嘗試
--custom-right位置。這與--custom-left位置的工作方式非常相似，應用了相同的width描述符值。但是，我們使用left和align-self來放置定位元素，而不是position-area。我們將left值包裝在calc()函式中，並在其中新增10px以建立間距，而不是使用margin。 - 如果沒有其他嘗試回退選項能夠阻止定位元素溢位，瀏覽器會作為最後手段嘗試
--custom-bottom-right位置。這使用position-area: bottom right將定位元素放置在錨點的右下方。
當應用位置選項時，其值會覆蓋在定位元素上設定的初始值。例如，最初在定位元素上設定的 width 是 200px，但當應用 --custom-right 位置選項時，其寬度設定為 100px。
在某些情況下，我們需要在自定義位置選項中設定值以關閉初始值。--custom-bottom 和 --custom-right 選項使用內嵌屬性和 *-self: anchor-center 值來放置定位元素，因此我們透過設定 position-area: none 來移除每個情況下先前設定的 position-area 值。如果我們不這樣做，最初設定的 position-area: top 值仍然會生效並干擾其他定位資訊。
規範
| 規範 |
|---|
| CSS 錨點定位 # at-ruledef-position-try |
瀏覽器相容性
載入中…