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 |
浏览器兼容性
加载中…