@position-try

Limited availability

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

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

@position-try CSS at-rule 用于定义自定义位置尝试回退选项，该选项可用于定义锚定元素的定位和对齐方式。可以通过 position-try-fallbacks 属性或 position-try 简写方式将一个或多个位置尝试回退选项应用于锚定元素。当定位元素移动到开始超出其包含块或视窗的位置时，浏览器将选择它找到的第一个将定位元素完全放回屏幕上的位置尝试回退选项。

每个位置选项都使用 <dashed-ident> 命名，并包含一个描述符列表，指定定义信息（如内边距位置、边距、大小和自对齐）的声明。<dashed-ident> 用于在 position-try-fallbacks 属性和 position-try 简写方式中引用自定义位置选项。

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

语法

css

@position-try --try-option-name {
  descriptor-list
}

注意：--try-option-name 是一个 <dashed-ident>，用于指定自定义位置选项的标识名称，然后可以使用该名称将该回退选项添加到 position-try-fallbacks 列表中。

Descriptors

描述符指定定义自定义位置选项行为的属性值，即它将导致定位元素放置的位置。

position-anchor

指定一个 position-anchor 属性值，该值定义定位元素所绑定的锚点元素，方法是指定一个等于锚点元素的 anchor-name 属性值的 <dashed-ident> 值。

position-area

指定一个 position-area 属性值，该值定义锚定定位元素相对于锚点的定位。

内边距属性描述符

指定 anchor() 函数值，这些值定义锚定定位元素的边缘相对于锚点元素边缘的定位。可以设置表示以下属性的内边距属性描述符

Margin property descriptors

指定锚定位元素上设置的边距。可以设置表示以下属性的边距属性描述符

尺寸属性描述符

指定anchor-size() 函数值，这些值定义了锚定位元素相对于锚元素大小的尺寸。可以设置表示以下属性的尺寸属性描述符

自对齐属性描述符

指定 anchor-center 值以将锚定位元素相对于锚元素的中心对齐，在块或内联方向上。 align-self 和 justify-self 属性描述符可以接受 anchor-center 值。

注意：当自定义位置选项应用于元素时，@position-try at-rule 描述符中定义的属性值优先于通过标准 CSS 属性设置在元素上的值。

正式语法

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }

示例

自定义位置选项用法

在此示例中，我们定义了一个锚元素和一个锚定位元素，然后创建了四个命名的自定义位置尝试回退选项。这些选项将应用于定位元素，以确保无论锚元素在视窗中的位置如何，其内容始终可见。

HTML

我们包括两个<div> 元素，它们将成为锚元素和锚定位元素

html

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

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

CSS

我们首先将<body> 元素的样式设置为非常大，以便我们可以水平和垂直地在视窗中滚动锚元素和定位元素

css

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-name，并且在其上设置了position 值为 absolute。然后，我们使用top 和left 值，将其定位在初始<body> 渲染的中心附近

css

.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

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

接下来，我们使用@position-try at-rule 定义四个自定义位置选项，使用描述性的<dashed-ident> 名称来识别它们并描述它们的用途。每个选项将定位元素放置在锚元素周围的特定位置，并在定位元素及其锚元素之间提供适当的 10px 边距。定位使用多种方式处理，以演示可用的不同技术

第一个和最后一个位置选项使用position-area。
第二个位置选项使用top 与anchor() 值以及 justify-self: anchor-center，以在内联方向上将定位元素居中到锚元素。
第三个位置选项使用left 与anchor() 值，包装在calc() 函数中，该函数添加 10px 的间距（而不是像其他选项那样使用 margin 来创建间距）。然后，它使用align-self: anchor-center，以在块方向上将定位元素居中到锚元素。

最后，左右位置选项被赋予更窄的width

css

@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin: 0 10px 0 0;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin: 10px 0 0 0;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

信息框被赋予固定定位，一个position-anchor 属性，该属性引用锚元素的anchor-name 以将两者关联起来，它使用position-area 被绑定到锚元素的顶部边缘。我们还为它提供了固定的width 和一些底部margin。然后，自定义位置选项在position-try-fallbacks 属性中被引用，以防止定位元素溢出或在锚元素接近视窗边缘时被滚动到视图之外。

css

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top;
  width: 200px;
  margin: 0 0 10px 0;
  position-try-fallbacks:
    --custom-left, --custom-bottom,
    --custom-right, --custom-bottom-right;
}

结果

滚动页面并注意定位元素放置的变化，因为锚元素接近视窗的不同边缘。这是由于应用了不同的回退位置选项。

我们来讨论一下这些位置选项是如何工作的

首先，请注意我们的默认位置由position-area: top 定义。当信息框在任何方向上都没有溢出页面时，信息框位于锚元素上方，并且在position-try-fallbacks 属性中设置的尝试回退位置选项被忽略。还要注意信息框具有固定的宽度和底部边距设置。这些值将随着应用不同的尝试回退位置选项而改变。
如果信息框开始溢出，浏览器首先尝试--custom-left 位置。这将使用position-area: left 将信息框移动到锚元素的左侧，调整边距以适应，并为信息框提供不同的宽度。
接下来，浏览器尝试--custom-bottom 位置。这将使用top 和justify-self 将信息框移动到锚元素的底部，而不是使用position-area，并设置适当的边距。它不包含width 描述符，因此信息框将恢复为由width 属性设置的默认宽度 200px。
浏览器接下来尝试--custom-right 位置。这与--custom-left 位置的工作方式大致相同，应用相同的width 描述符值。但是，我们使用left 和align-self 来放置定位元素，而不是使用position-area。并且我们正在将left 值包装在calc() 函数中，在其中我们添加了10px 以创建间距，而不是使用margin。
如果其他所有尝试回退选项都没有成功地阻止定位元素溢出，浏览器将作为最后手段尝试--custom-bottom-right 位置。这将使用position-area: bottom right 将定位元素放置在锚元素的右下角。

当应用位置选项时，它的值会覆盖在定位元素上设置的初始值。例如，最初在定位元素上设置的width 为200px，但是当应用--custom-right 位置选项时，它的宽度将被设置为100px。

在某些情况下，我们需要在自定义位置选项内部设置值以关闭初始值。--custom-bottom 和--custom-right 选项使用内嵌属性和*-self: anchor-center 值来放置定位元素，因此我们在每种情况下通过设置position-area: none 来删除先前设置的position-area: top 值。如果我们不这样做，最初设置的position-area: top 值将仍然生效并干扰其他定位信息。

规范

规范
CSS 锚定位 # at-ruledef-position-try

浏览器兼容性

BCD 表格仅在浏览器中加载