position-try
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The position-try
CSS property is a shorthand that corresponds to the position-try-order
and position-try-fallbacks
properties.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* 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;
Values
See position-try-order
and position-try-fallbacks
for value descriptions.
The position-try
shorthand can specify values for position-try-fallbacks
, or position-try-order
and position-try-fallbacks
, in that order. If position-try-order
is omitted, it is set to the property's initial value, which is normal
, meaning the position-try fallback options are tried in the order they appear in the property.
Formal definition
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | absolutely positioned elements |
Inherited | no |
Percentages | as each of the properties of the shorthand: |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Formal syntax
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}
Examples
Basic position-try
usage
This demo shows the effect of position-try
.
HTML
The HTML includes two <div>
elements that will become an anchor and an anchor-positioned element.
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
CSS
In the CSS, the anchor is given an anchor-name
and has a position
value of absolute
set on it. We position it in the top-half of the viewport using top
and left
values:
.anchor {
anchor-name: --myAnchor;
position: absolute;
top: 100px;
left: 45%;
}
We then include a custom position option — --custom-bottom
— which positions the element below the anchor and gives it an appropriate margin:
@position-try --custom-bottom {
top: anchor(bottom);
bottom: unset;
margin-top: 10px;
}
We initially position the element above its anchor, and then set a position-try
value on it that gives it a position-try-order
of most-height
, and a position-try-fallbacks
list that just includes our custom fallback option:
.infobox {
position: fixed;
position-anchor: --myAnchor;
bottom: anchor(top);
margin-bottom: 10px;
justify-self: anchor-center;
position-try: most-height --custom-bottom;
}
Result
The element appears below its anchor, even though it is initially positioned above it. This occurs because there is more vertical space below the anchor than there is above it. The most-height
try order causes the --custom-bottom
try fallback option to be applied, placing the positioned element in the position that gives its containing block the most height.
Specifications
Specification |
---|
CSS Anchor Positioning # position-try-prop |
Browser compatibility
BCD tables only load in the browser
See also
position-area
position-try-fallbacks
position-try-order
- The
@position-try
at-rule - The
<position-area>
value - CSS anchor positioning module
- Using CSS anchor positioning guide
- Handling overflow: try fallbacks and conditional hiding guide