位置尝试顺序 | CSS-Tricks

CSS 年鉴 → 属性 → P → position-try-order

Juan Diego Rodríguez 在 2024 年 8 月 13 日

CSS position-try-order 属性设置目标元素尝试使用的位置的顺序，以围绕锚点元素显示自身。可以将其视为为目标元素设置首选位置，如果理想位置没有足够的空间来显示它，则提供其他选项。

例如，我们可以告诉目标元素使用具有most-width的选项来定位自身

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;

  position-try-options: flip-inline, flip-start;
  position-try-order: most-width;
}

如果使用了该选项，则剩余选项将重新排序，其中最大的选项排在最前面。该属性需要与position-anchor属性配对以注册一个元素供目标元素锚定自身，以及锚点position-try-fallbacks属性，该属性定义由position-try-order排序的选项。这是因为它属于 CSS 锚点定位规范，这是一组许多功能，它们协同工作以定位一个元素（我们可以称之为目标），相对于另一个元素（称为锚点）。

注意：CSS 规范将该属性称为position-try-fallbacks，但截至撰写本文时，Chromium 浏览器实现将其称为position-try-options，并具有相同的值集。规范可能会更改，或者浏览器将来可能会更新其实现以保持一致性。在此之前，建议使用position-try速记属性。因此，本文中的所有演示都使用position-try-options。

语法

position-try-order: normal | <try-size>

<try-size> = most-width | most-height | most-block-size | most-inline-size

初始值：normal
应用于：绝对定位元素
继承：否
百分比：n/a
计算值：如指定
规范顺序：按语法
动画类型：离散

值

/* <try-size> keywords */
position-try-order: normal;
position-try-order: most-width;
position-try-order: most-height;
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;

normal: 位置选项将按position-try-fallbacks属性中指定的顺序尝试。
<try-size>: 对于每个位置选项，查找目标的相应内边距修改后的包含块大小。然后按该大小对位置选项列表进行排序，其中选定方向上最大的排在最前面。要选择哪个方向，有四个关键字
- most-width
- most-height
- most-block-size
- most-inline-size

什么是“内边距修改后的”包含块？

哇，前面的语法似乎有点复杂。至少对我来说，在不知道什么是“内边距修改后的包含块”的情况下，很难完全理解它。为了解释它，我们应该回溯到什么是包含块。

对于具有static位置的常规元素，其包含块将是最近的块元素祖先。例如，在以下 HTML 中，<main>元素是<div>的包含块

<body>
   <main> <!-- The containing block of <div> -->
     <div></div>
   </main>
</body>

绝对定位元素会逃离正常的文档流，因此会脱离其包含块。其新的包含块将是最近的具有除static以外位置的祖先，如果没有，则默认情况下将是视窗。因此，在常规锚点元素的情况下，其包含块将是整个屏幕。

现在，根据规范定义，“对于绝对定位的框，内边距属性会有效地缩减包含块，其中包含块的大小和位置由指定的数量确定。生成的矩形称为内边距修改后的包含块。”

在正常的绝对定位元素中，其内边距修改后的包含块将通过其内边距属性（top、left、right、bottom）逻辑地确定。我们可以很容易地在以下示例中看到它

.absolute-position {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

Example of an inset-modified containing block

其包含块是整个视窗，其内边距修改后的包含块距离顶部 80px，距离右侧 120px，距离底部 180px，距离左侧 90px。

在锚点元素的情况下，包含块可以分解为一个由四条虚线划分的网格

目标包含块的开头。
锚点元素的开头或anchor(start)。
锚点元素的结尾或anchor(end)
目标包含块的结尾。

Example of how we can think of the containing block of an anchor element

目标的内边距修改后的包含块将是它放置在网格上的区域，例如，以下目标元素…

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;

  height: 50px;
  idth: 50px;
}

…将具有以下包含块

如果我们将目标的height和width设置为100%，我们可以确切地看到内边距修改后的包含块是如何增长和缩小的。

使用`position-try-order`

现在我们知道了目标元素的内边距修改后的包含块是什么，我们可以看到position-try-order属性如何决定选择哪个位置。例如，我们可以将以下元素链接在一起…

<main>
  <div class="anchor">Anchor</div>
  <div class="target">Target</div>
</main>

…使用锚点定位

.anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

如果我们将.target定位在其.anchor的右上角，那么每当我们向下滚动时，它都会溢出，因此我们可以添加一个新的position-try-fallbacks选项，以便在发生这种情况时将其翻转到右下角

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;
  position-try-options: flip-block;
}

最后，我们选择使用most-height关键字作为默认值，为.target元素的内边距修改后的包含块提供最大高度的位置。

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;
  position-try-options: flip-block;
  position-try-order: most-height;
}

同样，如果我们将.target元素的height和width设置为100%，我们可以看到它在实际中的运行效果。

包含块是可调整大小的，因此移动它以查看位置如何随着空间大小的变化而变化！