Skip to content

ref.positionAnchor()

Position the styled element against the anchor that a ref names.

View as Markdown

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

Example

Source

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

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

Generated 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().

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

See Element relationships for a complete example with an anchor scope.