---
title: "ref.positionAnchor()"
description: "Position the styled element against the anchor that a ref names."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ref.positionAnchor()

`trigger.positionAnchor()` sets `position-anchor` on the styled element, so that
`anchor()` values in its other utilities refer to the `trigger` anchor.

## Example

### Source

```tsx
import { style } from "stillwind/react";

const trigger = style.ref("trigger");
export const button = style(trigger, trigger.asAnchor());
export const popover = style(
  "absolute",
  trigger.positionAnchor(),
  "top-[anchor(bottom)] left-[anchor(left)]",
);
```

### Compiled code

```ts
const trigger = undefined;
export const button = {className:"sw_l9spr sw_trigger_xnn7w"};
export const popover = {className:"sw_fu7et"};
```

### Generated CSS


```css
.sw_l9spr:where(.sw_trigger_xnn7w) {
  anchor-name: --sw-a-trigger-xnn7w;
}

.sw_fu7et {
  position-anchor: --sw-a-trigger-xnn7w;
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
}
```

## Inputs

`positionAnchor()` takes no arguments.

## Behavior

The styled element does not need the `trigger` ref. The anchor element needs it,
together with [`trigger.asAnchor()`](/docs/macros/ref/as-anchor).

Write the call directly in `style()`. You cannot store it in a variable and use
it later.

See [Element relationships](/docs/guides/element-relationships#position-an-element-at-an-anchor)
for a complete example with an anchor scope.

Source: https://stillwind.dev/docs/macros/ref/position-anchor/index.mdx