构成属性
此属性是以下 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> =
[ 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}
示例
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，并设置了 absolute 的 position 值。我们使用 top 和 left 值将其定位在视口的上半部分。
css
.anchor {
anchor-name: --my-anchor;
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: --my-anchor;
bottom: anchor(top);
margin-bottom: 10px;
justify-self: anchor-center;
position-try: most-height --custom-bottom;
}
结果
即使元素最初定位在其锚点上方，它仍显示在其锚点下方。这是因为锚点下方有比上方更多的垂直空间。most-height 尝试顺序导致应用 --custom-bottom 尝试回退选项，将定位元素放置在为其包含块提供最大高度的位置。
规范
| 规范 |
|---|
| CSS 锚点定位 # position-try-prop |
浏览器兼容性
加载中…