# CSS Anchor Positioning API

The CSS Anchor Positioning API allows you to tether an absolutely positioned element (like a tooltip, popover, or dropdown menu) to one or more "anchor" elements on the page. This solves the long-standing problem of positioning floating elements relative to other elements without using JavaScript libraries like Popper.js.

## 1. The Concept

You define an **anchor element** (the trigger) and a **positioned element** (the popup). The positioned element is then tethered to the anchor using CSS properties.

## 2. Defining an Anchor

You can define an anchor in two ways:

### Implicit Anchor (HTML Attribute)
Using the `anchor` attribute on the positioned element to point to the ID of the anchor element.

```html
<button id="my-button">Click me</button>
<div class="tooltip" anchor="my-button">I am a tooltip</div>
```

### Explicit Anchor (CSS Property)
Using the `anchor-name` property on the anchor element.

```css
.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position-anchor: --my-anchor;
}
```

## 3. Positioning the Element

Once anchored, you use the `anchor()` function within standard positioning properties (`top`, `left`, `right`, `bottom`, etc.) to align the element.

```css
.tooltip {
  position: absolute;
  
  /* Align the top of the tooltip to the bottom of the anchor */
  top: anchor(bottom);
  
  /* Align the left of the tooltip to the left of the anchor */
  left: anchor(left);
}
```

### `anchor()` Arguments
*   `anchor(side)`: Refers to the position of the anchor's side (`top`, `right`, `bottom`, `left`, `center`, etc.).
*   `anchor(--name side)`: Refers to a specific named anchor.

## 4. Centering

To center a tooltip horizontally relative to the anchor:

```css
.tooltip {
  position: absolute;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%); /* Standard centering technique */
}
```

## 5. Fallback Positioning (`@position-try`)

If the tooltip goes off-screen, you can define fallback positions using `@position-try`.

```css
@position-try --flip-bottom {
  top: anchor(bottom);
}

.tooltip {
  position-try-fallbacks: --flip-bottom, flip-block;
}
```

[[programming/css/css]]
[[programming/css/positioning]]
[[programming/javascript/vanilla/dom-manipulation]]