position-try-fallbacks

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

position-try-fallbacks 这个 CSS 属性可以指定一个或多个备选的定位尝试回退选项列表，用于相对于其关联的锚定元素放置锚定定位的元素。当该元素原本会溢出其经由内边距调整的包含块时，浏览器将按照提供的顺序，尝试将定位元素放置在这些不同的回退位置，直到找到一个可以使其不再溢出其容器或视口的值。

注意：可以使用 position-try 简写属性在一个声明中同时指定 position-try-order 和 position-try-fallbacks 的值。

注意：该属性最初在 Chromium 浏览器中被命名并支持为 position-try-options，其属性值相同。在 position-try-fallbacks 得到支持之前，请改用 position-try 简写。

语法

css

/* Default value: no try fallback options */
position-try-fallbacks: none;

/* Single try option */
position-try-fallbacks: flip-block;
position-try-fallbacks: top;
position-try-fallbacks: --custom-try-option;

/* Multiple value combination option */
position-try-fallbacks: flip-block flip-inline;

/* Multiple values */
position-try-fallbacks: flip-block, flip-inline;
position-try-fallbacks: top, right, bottom;
position-try-fallbacks: --custom-try-option1, --custom-try-option2;
position-try-fallbacks:
  flip-block,
  flip-inline,
  flip-block flip-inline;
position-try-fallbacks:
  flip-block,
  --custom-try-option,
  --custom-try-option flip-inline,
  right;

/* Global values */
position-try-fallbacks: inherit;
position-try-fallbacks: initial;
position-try-fallbacks: revert;
position-try-fallbacks: revert-layer;
position-try-fallbacks: unset;

position-try-fallbacks 属性可以指定为关键字值 none，或者是一个由逗号分隔的一个或多个以空格分隔的自定义定位选项名称、<try-tactic> 或 position-area 值的列表。

值

none

默认值。没有设置定位尝试回退选项。

<try-tactic>

预定义的回退选项通过获取定位元素的计算位置，并将其沿锚点的特定轴进行变换来移动元素，同时镜像任何外边距偏移。可能的值有：

flip-block: 沿块轴翻转元素的位置。
flip-inline: 沿内联轴翻转元素的位置。
flip-start: 同时翻转内联轴和块轴的值，将 start 属性相互交换，end 属性相互交换。

position-area 值

根据指定的 <position-area> 值，将定位元素放置在隐式的 3x3 定位区域网格的一个或多个单元格上，从而相对于其关联的锚定元素的边缘进行定位；其效果等同于一个仅包含 position-area 描述符的自定义 @position-try 回退选项。

<dashed-ident>

向回退选项列表中添加一个自定义的 @position-try 选项，其标识名称与指定的 dashed-ident 相匹配。如果不存在该名称的自定义定位选项，则该选项将被忽略。

注意：可以指定多个选项，用逗号分隔。

描述

无论其锚点位于何处，只要有可能，锚定定位的元素都应出现在方便用户交互的位置。为防止定位元素溢出视口，当其锚点靠近其包含元素或视口的边缘时，通常需要改变其位置。

这可以通过在 position-try-fallbacks 属性中提供一个或多个定位尝试回退选项来实现。如果定位元素的初始位置会溢出，浏览器将尝试每个回退定位选项；第一个不会导致元素溢出其包含块的回退选项将被应用。默认情况下，浏览器会按照它们在列表中出现的顺序进行尝试，应用它找到的第一个能阻止定位元素溢出的选项。

如果没有找到任何选项能将定位元素完全放置在屏幕上，浏览器将恢复到应用任何尝试回退选项之前的默认位置来显示定位元素。

注意：在某些情况下，你可能只想隐藏溢出的定位元素，这可以通过使用 position-visibility 属性来实现。然而，在大多数情况下，最好将它们保留在屏幕上并保持可用。

有关锚定特性和定位尝试回退用法的详细信息，请参阅 CSS 锚定定位模块的介绍页面和溢出时的回退选项和条件隐藏指南。

预定义的 <try-tactic> 值

在规范中称为 <try-tactic>，预定义的值通过获取定位元素的计算位置并沿锚点的特定轴进行变换来移动它。预定义的值有：

flip-block: 沿块轴翻转元素的位置，使其与锚点保持相同的距离，但位于锚点的另一侧。换句话说，它将元素的位置沿穿过锚点中心的内联轴进行镜像。例如，如果定位元素开始在锚点的顶部溢出，此值会将其位置翻转到底部。
flip-inline: 沿内联轴翻转元素的位置，使其与锚点保持相同的距离，但位于锚点的另一侧。换句话说，它将元素的位置沿穿过锚点中心的块轴进行镜像。例如，如果定位元素开始在锚点的左侧溢出，此值会将其位置翻转到右侧。
flip-start: 沿穿过锚点中心的对角线轴镜像元素的位置，该对角线穿过块轴起点和内联轴起点的交点，以及块轴终点和内联轴终点的交点。例如，如果定位元素开始在锚点的左侧溢出，此值会将其翻转到顶部。

组合选项

一个单独的定位尝试回退选项可以包含多个 <try-tactic> 或 dashed-ident 选项，或两者的组合，只需将它们声明为单个以空格分隔的选项即可：

对于多个预定义的 <try-tactic> 选项，它们的变换会组合在一起。
在声明一个预定义的 <try-tactic> 和一个名为 <dashed-ident> 的 @position-try 选项的情况下，会首先应用自定义定位选项，然后再应用 <try-tactic> 变换。

position-area 值不能像这样组合。

正式定义

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

正式语法

position-try-fallbacks = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}

示例

基本用法

此示例展示了几个预定义的 <try-tactic> 回退选项的基本用法。

HTML

HTML 包含两个 <div> 元素，它们将成为锚点和锚定定位的元素：

html

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

我们将 <body> 元素的样式设置为非常大，以启用水平和垂直滚动。

锚点被赋予一个 anchor-name 和较大的外边距，以将其放置在 <body> 可见部分的中心附近：

.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

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

信息框被赋予固定定位，以及一个引用锚点 anchor-name 的 position-anchor 属性，以将两者关联起来，并使用 position-area 将其系于锚点的左上角。

我们包含了一个 position-try-fallbacks 列表（并用 position-try 简写重新声明它，以防完整属性名尚不支持），提供了两个预定义的定位尝试回退选项，以防止当锚点靠近视口边缘时，通过沿锚点的内联轴或块轴翻转来避免溢出。

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try-fallbacks: flip-block, flip-inline;
  position-try: flip-block, flip-inline;
}

结果

这给了我们以下结果：

尝试滚动，使锚点靠近边缘：

如果将锚点移动到视口顶部附近，你将看到定位元素翻转到锚点的左下方以避免溢出。
如果将锚点移动到视口左侧附近，你将看到定位元素翻转到锚点的右上方以避免溢出。

但是，如果将锚点移向视口的左上角，你会注意到一个问题——当定位元素开始在块和内联方向上溢出时，它会翻转回其默认的左上角位置，并在两个方向上都溢出，这不是我们想要的。

这是因为我们只给了浏览器 flip-block 或 flip-inline 的定位选项。我们没有给它同时尝试两者的选项。下一个示例将向你展示如何解决这个问题。

将多个值组合成一个选项

让我们使用一个组合的尝试回退选项来解决我们在上一个演示中发现的问题。

HTML 和 CSS

此演示中的所有 HTML 和 CSS 都是相同的，除了定位元素的代码。在这种情况下，它被赋予了第三个定位尝试回退选项：flip-block flip-inline。

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

结果

第三个定位尝试回退选项意味着浏览器将首先尝试 flip-block，然后尝试 flip-inline 来避免溢出，如果这些回退失败，它将把两者结合起来，同时在块和内联方向上翻转元素的位置。现在，当你将锚点滚动到视口的顶部和左侧边缘时，定位元素将翻转到右下方。

`position-area` 尝试回退选项

此示例展示了一些 position-area 定位尝试回退选项的实际效果。

HTML 和 CSS

此演示中的所有 HTML 和 CSS 都是相同的，除了定位元素的代码。在这种情况下，我们的定位尝试回退选项都是 position-area 值——top、top right、right、bottom right、bottom、bottom left 和 left。

这意味着无论锚点靠近哪个视口边缘，定位元素都会找到一个合理的位置来显示。这种方法比预定义值的方法更冗长一些，但也更精细和灵活。

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --my-anchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top left;

  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;

  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

结果

滚动页面，并查看当锚点靠近视口边缘时，这些定位尝试回退选项的效果。

自定义尝试选项示例

请参阅 @position-try 参考页面。

规范

规范
CSS 锚点定位 # position-try-fallbacks

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年8月13日⁩，由 MDN 贡献者撰写。

在 GitHub 上查看此页面 • 报告此内容的问题