構成屬性
此屬性是以下 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 |
瀏覽器相容性
載入中…