position-try-order

可用性有限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

实验性功能： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细检查浏览器兼容性表。

position-try-order CSS 属性允许您指定各种回退选项，这些选项会导致使用可用的 position-try 回退来设置锚定定位元素的位置，而不是其初始位置设置。

注意： 还有一个简写属性——position-try，它可以用于在一个声明中指定 position-try-order 和 position-try-fallbacks 值。

语法

css

/* 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 一样。

有关锚点功能和 position try 选项用法的详细信息，请参阅 CSS 锚点定位模块着陆页和处理溢出：尝试回退和条件隐藏指南。

正式定义

初始值	`normal`
应用于	绝对定位的元素
继承	否
计算值	按指定
动画类型	离散

正式语法

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 值。

html

<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 {
  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

.anchor {
  anchor-name: --myAnchor;
  margin: 90px auto;
}

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

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

然后，我们包含一个名为--custom-bottom的自定义位置选项，它将元素定位在锚点下方并为其提供适当的边距。

css

@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

我们最初将元素定位在其锚点上方，然后使用position-try简写为其提供我们的自定义位置选项，该选项还将position-try-order属性设置为normal。

css

.infobox {
  position: fixed;
  position-anchor: --myAnchor;

  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作为位置尝试回退选项应用，从而将元素定位在锚点下方。发生这种情况是因为锚点下方比锚点上方有更多的垂直空间。

规范

规范
CSS 锚点定位 # position-try-order 属性

浏览器兼容性

BCD 表格仅在浏览器中加载