# position-try-fallbacks

> Applies the CSS Anchor Positioning `position-try-fallbacks` property, listing named tactics or `--custom-position-try` references tried in order when the preferred position overflows its containing block.

```ts
import { positionTryFallbacks } from "@sdxc/u/layout";
```

Applies the CSS Anchor Positioning `position-try-fallbacks` property,
listing named tactics or `--custom-position-try` references tried in order
when the preferred position overflows its containing block.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.positionTryFallbacks("flip-block")` | `css({ positionTryFallbacks: "flip-block" })` |
| `u.positionTryFallbacks("flip-block", "flip-inline")` | `css({ positionTryFallbacks: "flip-block, flip-inline" })` |

## Examples

### Basic example

Use `positionTryFallbacks()` to list positions to try when the preferred one overflows, like `"flip-block"` to move a tooltip below an anchor with no room above it:

```tsx
<div mix={[...]}>
	<div
		mix={[
			relative(),
			vstack({ align: "center", justify: "end" }),
			is(48),
			bs(36),
			...,
		]}
	>
		<div mix={[anchorName("low"), mb(4), ...]}>room above</div>
		<div
			mix={[
				absolute(),
				positionAnchor("low"),
				positionArea("top"),
				positionTryFallbacks("flip-block"),
				m(1),
				...,
			]}
		>
			tooltip
		</div>
	</div>
	<div
		mix={[
			relative(),
			vstack({ align: "center", justify: "start" }),
			is(48),
			bs(36),
			...,
		]}
	>
		<div mix={[anchorName("high"), mb(4), ...]}>no room above</div>
		<div
			mix={[
				absolute(),
				positionAnchor("high"),
				positionArea("top"),
				positionTryFallbacks("flip-block"),
				m(1),
				...,
			]}
		>
			tooltip
		</div>
	</div>
</div>
```

### Trying several fallbacks

Pass several fallbacks to try them in order, combining tactics in one entry like `"flip-block flip-inline"`:

```tsx
<div mix={[relative(), vstack({ align: "end" }), is(72), bs(40), ...]}>
	<div mix={[anchorName("corner"), m(2), ...]}>anchor</div>
	<div
		mix={[
			absolute(),
			positionAnchor("corner"),
			positionArea("top right"),
			positionTryFallbacks("flip-block", "flip-inline", "flip-block flip-inline"),
			...,
		]}
	>
		flipped twice
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.positionTryFallbacks("flip-block"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.positionTryFallbacks("flip-block"))
```

## Signature

```ts
u.positionTryFallbacks(...values: string[])
```