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>和名为@postion-try的<dashed-ident>选项的情况下，自定义位置选项将首先应用，然后应用<try-tactic>转换。

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

正式定义

在数据库中找不到值！

正式语法

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

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

<position-area> = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-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: --myAnchor;
  margin: 100px 350px;
}

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

我们包含一个position-try-fallbacks列表（并在position-try简写中重新声明它，以防长属性名称尚未得到支持），提供两个预定义的位置尝试备用选项，以防止它在锚点靠近视口边缘时溢出，方法是沿着锚点的内联或块轴翻转它。

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

css

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  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: --myAnchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  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: --myAnchor;
  margin: 100px 350px;
}

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

css

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  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

浏览器兼容性

BCD 表格仅在浏览器中加载