position-try-order
position-try-order CSS 屬性允許你指定各種回退選項，這些選項會導致使用可用的 position-try 回退來設定錨定定位元素的位置，而不是其初始位置設定。
注意： 還有一個簡寫屬性 — position-try，可以用於在單個宣告中指定 position-try-order 和 position-try-fallbacks 的值。
語法
/* Keywords */
position-try-order: normal;
position-try-order: most-height;
position-try-order: most-width;
position-try-order: most-block-size;
position-try-order: most-inline-size;
/* Global values */
position-try-order: inherit;
position-try-order: initial;
position-try-order: revert;
position-try-order: revert-layer;
position-try-order: unset;
值
position-try-order 屬性可以指定為關鍵字值 normal 或 <try-size>。
normal-
預設值。當元素首次顯示時，不會嘗試任何 position-try 回退選項。
<try-size>-
定義了不同的嘗試尺寸回退選項，這些選項指定了在錨定定位元素首次渲染時，應應用哪個嘗試回退的條件。可用值為：
most-height-
將應用使元素的包含塊具有最大高度的 position try 回退選項。
most-width-
將應用使元素的包含塊具有最大寬度的 position try 回退選項。
most-block-size-
將應用使元素的包含塊在塊方向上具有最大尺寸的 position try 回退選項。
most-inline-size-
將應用使元素的包含塊在內聯方向上具有最大尺寸的 position try 回退選項。
描述
position-try-order 屬性與其他 position-try 功能特性略有不同，它在定位元素首次顯示時使用 position-try 回退選項，而不是在滾動時使用。例如，你可能希望最初在具有比預設初始位置更多可用高度或寬度的空間中顯示元素。
瀏覽器將測試可用的 position-try 回退選項，以找到哪個選項在指定維度中為錨定定位元素提供了最大空間。然後它將應用該選項，覆蓋元素的初始樣式。
如果沒有可用的 position try 回退選項能提供比元素分配的初始定位更多的寬度/高度，則不會應用任何 position try 選項。實際上，其行為就像 position-try-order 設定為 normal 一樣。
有關錨點功能和位置嘗試選項使用的詳細資訊，請參閱 CSS 錨點定位模組著陸頁和 溢位回退選項和條件隱藏指南。
正式定義
正式語法
position-try-order =
normal |
<try-size>
<try-size> =
most-width |
most-height |
most-block-size |
most-inline-size
示例
position-try-order 的基本用法
此演示展示了 position-try-order 的效果。
HTML
HTML 包含兩個 <div> 元素，它們將成為錨點和錨定定位元素，以及一個包含單選按鈕的 <form>，允許你選擇不同的 position-try-order 值。
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
<form>
<fieldset>
<legend>Choose a try order</legend>
<div>
<label for="radio-normal">normal</label>
<input
type="radio"
id="radio-normal"
name="position-try-order"
value="normal"
checked />
</div>
<div>
<label for="radio-most-height">most-height</label>
<input
type="radio"
id="radio-most-height"
name="position-try-order"
value="most-height" />
</div>
</fieldset>
</form>
CSS
在 CSS 中，錨點被賦予了 anchor-name，並有一個大的 margin 將其定位在視口頂部中心附近
.anchor {
anchor-name: --my-anchor;
margin: 90px auto;
}
然後我們包含一個名為 --custom-bottom 的自定義位置選項，它將元素定位在錨點下方並賦予其適當的邊距
@position-try --custom-bottom {
top: anchor(bottom);
bottom: unset;
margin-top: 10px;
}
我們最初將元素定位在其錨點上方，然後使用 position-try 簡寫為其提供自定義位置選項，這也將 position-try-order 屬性設定為 normal
.infobox {
position: fixed;
position-anchor: --my-anchor;
bottom: anchor(top);
margin-bottom: 10px;
justify-self: anchor-center;
position-try: normal --custom-bottom;
}
JavaScript
最後，我們包含了一些 JavaScript。它在單選按鈕上設定了一個 change 事件處理程式，以便在選擇新值時，該值將應用於資訊框的 position-try-order 屬性。
const infobox = document.querySelector(".infobox");
const form = document.forms[0];
const radios = form.elements["position-try-order"];
for (const radio of radios) {
radio.addEventListener("change", setTryOrder);
}
function setTryOrder(e) {
const tryOrder = e.target.value;
infobox.style.positionTryOrder = tryOrder;
}
結果
嘗試選擇 most-height 排序選項。這會將 --custom-bottom 應用為 position try 回退選項，將元素定位在錨點下方。發生這種情況是因為錨點下方有比其上方更多的垂直空間。
規範
| 規範 |
|---|
| CSS 錨點定位 # position-try-order-property |
瀏覽器相容性
載入中…