@position-try
@position-try CSS @规则用于定义自定义位置尝试回退选项，该选项可用于定义锚点定位元素的定位和对齐方式。一个或多个位置尝试回退选项集可以通过 position-try-fallbacks 属性或 position-try 简写应用于锚定元素。当定位元素移动到开始溢出其包含块或视口的位置时，浏览器将选择它找到的第一个位置尝试回退选项，该选项将定位元素完全放回屏幕上。
每个位置选项都用 <dashed-ident> 命名，并包含一个描述符列表，指定定义诸如内嵌位置、外边距、大小和自对齐等信息的声明。<dashed-ident> 用于在 position-try-fallbacks 属性和 position-try 简写中引用自定义位置选项。
有关锚点功能和位置尝试回退用法的详细信息，请参阅 CSS 锚点定位模块着陆页和 溢出时的回退选项和条件隐藏指南。
语法
@position-try --try-option-name {
descriptor-list
}
注意：--try-option-name 是一个 <dashed-ident>，用于指定自定义位置选项的标识名称，然后可以使用该名称将回退选项添加到 position-try-fallbacks 列表中。
描述符
描述符指定属性值，这些属性值定义自定义位置选项的行为，即它将导致定位元素放置的位置。
position-anchor-
指定
position-anchor属性值，该值通过指定与锚点元素的anchor-name属性值相等的<dashed-ident>值，来定义定位元素所锚定的锚点元素。 position-area-
指定
position-area属性值，该值定义锚点定位元素相对于锚点的位置。 - 内嵌属性描述符
-
指定
anchor()函数值，该值定义锚点定位元素的边缘相对于锚点元素边缘的位置。可以设置表示以下属性的内嵌属性描述符 - 外边距属性描述符
-
指定在锚点定位元素上设置的外边距。可以设置表示以下属性的外边距属性描述符
- 尺寸属性描述符
-
指定
anchor-size()函数值，该值定义锚点定位元素相对于锚点元素的大小。可以设置表示以下属性的尺寸属性描述符 - 自对齐属性描述符
-
指定
anchor-center值，以在块或行内方向上将锚点定位元素相对于锚点元素的中心对齐。align-self和justify-self属性描述符可以采用anchor-center值。
注意：当自定义位置选项应用于元素时，@position-try @规则描述符中定义的属性值优先于通过标准 CSS 属性在元素上设置的值。
正式语法
@position-try =
@position-try <dashed-ident> { <declaration-list> }
示例
自定义位置选项用法
在此示例中，我们定义了一个锚点元素和一个锚点定位元素，然后创建了四个命名自定义位置尝试回退选项。这些选项应用于定位元素，以确保无论锚点元素在视口中的哪个位置，其内容始终可见。
HTML
我们包含两个 <div> 元素，它们将成为锚点和锚点定位元素。
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
CSS
我们首先将 <body> 元素样式设置得非常大，以便我们可以在视口中水平和垂直滚动锚点和定位元素。
body {
width: 1500px;
height: 500px;
}
锚点被赋予一个 anchor-name，并且其 position 值设置为 absolute。然后，我们使用 top 和 left 值将其定位在初始 <body> 渲染的中心附近。
.anchor {
anchor-name: --my-anchor;
position: absolute;
top: 100px;
left: 350px;
}
接下来，我们使用 @position-try @规则定义了四个自定义位置选项，并使用描述性的 <dashed-ident> 名称来识别它们并描述其目的。每个选项都将定位元素放置在锚点元素周围的特定位置，并在定位元素及其锚点之间提供适当的 10px 外边距。定位以各种方式处理，以演示可用的不同技术。
- 第一个和最后一个位置选项使用
position-area。 - 第二个位置选项使用带有
anchor()值的top和justify-self: anchor-center，以在行内方向上将定位元素在锚点上居中。 - 第三个位置选项使用带有
anchor()值的left，包装在一个calc()函数中，该函数添加10px的间距（而不是像其他选项那样使用margin创建间距）。然后，它使用align-self: anchor-center在块方向上将定位元素在锚点上居中。
最后，左右位置选项被赋予更窄的 width。
@position-try --custom-left {
position-area: left;
width: 100px;
margin-right: 10px;
}
@position-try --custom-bottom {
top: anchor(bottom);
justify-self: anchor-center;
margin-top: 10px;
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;
}
信息框被赋予固定定位，一个引用锚点 anchor-name 的 position-anchor 属性以将两者关联起来，并且它使用 position-area 锚定到锚点的顶部边缘。我们还给它一个固定的 width 和一些底部 margin。然后，自定义位置选项在 position-try-fallbacks 属性中引用，以防止当锚点靠近视口边缘时，定位元素溢出或被滚动出视图。
.infobox {
position: fixed;
position-anchor: --my-anchor;
position-area: top;
width: 200px;
margin-bottom: 10px;
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 值。如果我们不这样做，最初设置的 position-area: top 值仍然会生效并干扰其他定位信息。
规范
| 规范 |
|---|
| CSS 锚点定位 # at-ruledef-position-try |
浏览器兼容性
加载中…