position-try

可用性有限

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

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

position-try CSS 属性是一个简写，对应于 position-try-order 和 position-try-fallbacks 属性。

构成属性

此属性是以下 CSS 属性的简写

语法

css
/* position-try-fallbacks only */
position-try: normal flip-block;
position-try: top;
position-try: --custom-try-option;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --custom-try-option1, --custom-try-option2;
position-try:
  normal flip-block,
  right,
  --custom-try-option;

/* position-try-order and position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

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

值

请参阅 position-try-order 和 position-try-fallbacks 以获取值描述。

position-try 简写可以按顺序指定 position-try-fallbacks 或 position-try-order 和 position-try-fallbacks 的值。如果省略 position-try-order，则将其设置为属性的初始值 normal，这意味着按属性中出现的顺序尝试 position-try 备用选项。

正式定义

初始值作为简写中每个属性的初始值
应用于绝对定位的元素
继承否
计算值作为简写中每个属性的初始值
动画类型作为简写中每个属性的初始值

正式语法

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

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

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

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

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

示例

基本 position-try 用法

此演示显示了 position-try 的效果。

HTML

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

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

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

CSS

在 CSS 中，锚点被赋予了一个 anchor-name，并且在其上设置了 position 值为 absolute。我们使用 top 和 left 值将其定位在视口的上半部分

css
.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

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

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

我们最初将元素定位在其锚点上方，然后在其上设置 position-try 值，该值赋予其 position-try-order 为 most-height，以及仅包含我们的自定义备用选项的 position-try-fallbacks 列表

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

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try: most-height --custom-bottom;
}

结果

即使元素最初定位在其锚点上方，它也会出现在其锚点下方。发生这种情况是因为锚点下方比上方有更多的垂直空间。most-height 尝试顺序导致应用 --custom-bottom 尝试备用选项，将定位元素放置在为其包含块提供最大高度的位置。

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅