Home Anchor Positioning API in CSS: A Complete Guide

Tutorials

Anchor Positioning API in CSS: A Complete Guide

Découvrez l’Anchor Positioning API en CSS, son fonctionnement et ses usages pour améliorer la gestion des positions d’éléments.

byDev Solutions

October 21, 2025

A web developer looking astonished at new CSS Anchor Positioning API code, with floating UI elements like tooltips and popovers dynamically positioned on screen.

🏗️ The **Anchor Positioning API** provides a dynamic way to position elements relative to an anchor without JavaScript.
– 🖥️ Currently **experimental**, it is supported in **Chromium-based browsers** like Chrome, Edge, and Opera.
– 🔄 **Fallback positioning** ensures elements remain visible, automatically adjusting to available space.
– ✨ Unlike traditional **CSS positioning**, this API removes the need for manual offset calculations or JavaScript-based repositioning.
– 🚀 Progressive enhancement strategies allow safe usage while maintaining **backward compatibility**.

Anchor Positioning API in CSS: A Complete Guide

The **Anchor Positioning API** is a new CSS feature designed to position elements dynamically relative to an **anchor element** without relying on JavaScript. This provides an advanced way to handle tooltips, dropdowns, popovers, and other UI components **without complex scripting**. Unlike traditional `absolute`, `relative`, or `fixed` positioning, this API allows elements to align **fluidly based on available space**, ensuring they don’t overflow or get cut off. Let’s explore how it works, its benefits, and how you can start using it effectively.

## Understanding the Anchor Positioning API

The **Anchor Positioning API** introduces a way to position elements relative to a defined **anchor element**, making positioning more intuitive and adaptive.

### How It Differs from Traditional CSS Positioning

Previously, developers relied on `absolute`, `relative`, `fixed`, or `sticky` positioning, often requiring manual adjustments or JavaScript for dynamic behaviors. The **Anchor Positioning API** improves on this by:

✔️ **Automating positioning** — Elements **dynamically adjust** based on available space.
✔️ **Reducing reliance on JavaScript** — Eliminates manual **event-based positioning**.
✔️ **Providing fallback positions** — Ensures elements remain **visible and properly placed**.

Instead of determining `top`, `left`, or `right` values manually, developers can **attach elements directly to anchors** and define where they should appear.

## Current Browser Support and Experimental Status

The **Anchor Positioning API** is currently **experimental** and **not yet widely supported**, mainly available in **Chromium-based browsers** such as:

✅ **Google Chrome**
✅ **Microsoft Edge**
✅ **Opera**

To check real-time browser support, refer to the **[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/anchor)** or test in **Chrome Canary** with the appropriate feature flag enabled.

Since adoption is still growing, **it is recommended to use progressive enhancement** to ensure compatibility across browsers.

## Basic Implementation: Using the Anchor Positioning API

### Step 1: Define an Anchor Element

The first step is to assign a **unique anchor name** to the element:

“`css
button {
anchor-name: –button-anchor;
}

Step 2: Position the Target Element Relative to the Anchor

Use position-anchor to link the positioned element to its anchor:

.tooltip {
  position: absolute;
  position-anchor: --button-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

Step 3: Alternative Layout with `inset-area`

The inset-area property provides simpler, more intuitive placement within a 3×3 spatial grid around the anchor:

.tooltip {
  position: absolute;
  position-anchor: --button-anchor;
  inset-area: top center;
}

Step 4: Using Anchor Tools to Visualize

You can use the Chrome Anchor Positioning Tool to visualize the positioning process.

Advanced Positioning Techniques

Centering an Element

To perfectly center a tooltip over its anchor:

.tooltip {
  justify-self: anchor-center;
  align-self: anchor-center;
}

Referencing Multiple Anchors

You can define multiple anchors in a single positioning statement:

.tooltip {
  left: anchor(--primary-anchor right);
  right: anchor(--secondary-anchor left);
}

Dynamic Repositioning with `@position-try`

A crucial benefit of the Anchor Positioning API is its ability to automatically adjust placement when space is unavailable.

Example: Auto-Switch Positions

@position-try --bottom-position {
  inset-area: bottom;
}

.tooltip {
  position: absolute;
  position-anchor: --button-anchor;
  inset-area: top;
  position-try-options: --bottom-position;
}

Here, the tooltip defaults to top placement but moves to the bottom if necessary.

Multiple Fallbacks for Better Flexibility

@position-try --right-position { inset-area: right; }
@position-try --left-position { inset-area: left; }

.tooltip {
  position-try-options: --bottom-position, --right-position, --left-position;
}

This ensures proper positioning in all available spaces.

Auto-Flipping with `flip-block`

Instead of defining multiple fallbacks manually:

.tooltip {
  position-try-options: flip-block;
}

This will automatically flip between top and bottom when needed.

Handling Element Visibility and Overflow

To keep positioned elements within view, use position-visibility:

Hide when Anchor is Off-Screen

.tooltip {
  position-visibility: anchors-visible;
}

Hide When Element Itself Overflows

.tooltip {
  position-visibility: no-overflow;
}

Retrieving Anchor Dimensions with `anchor-size()`

To resize an element dynamically based on its anchor:

.tooltip {
  max-width: calc(anchor-size(width) * 2);
}

This example ensures the tooltip is at most twice as wide as the anchor.

Progressive Enhancement Strategy

Using CSS Feature Detection

@supports (anchor-name: --anchor) {
  /* Safe to use Anchor Positioning API */
}

JavaScript Fallback for Compatibility

if ("anchorName" in document.documentElement.style) {
  // Use Anchor Positioning API
} else {
  // Use JavaScript-based positioning
}

This ensures graceful degradation when the API isn’t supported.

Conclusion

The Anchor Positioning API revolutionizes CSS positioning by enabling dynamic, context-aware layouts without JavaScript. Its automatic fallback positioning, visibility handling, and adaptability make it ideal for tooltips, dropdowns, modals, and popovers.

While still experimental, developers can begin using it with progressive enhancement and prepare for wider support in the future.

🌟 Explore more at MDN Web Docs: Anchor Positioning API and start improving your positioning workflows today!

FAQs

What is the Anchor Positioning API?

The Anchor Positioning API allows elements to be dynamically positioned relative to an anchor without JavaScript, improving layout flexibility in CSS.

How does it compare to traditional CSS positioning techniques?

Unlike fixed absolute or relative positioning, the API allows adaptive positioning that responds dynamically to space availability.

Why is it valuable for developers working with tooltips and popovers?

It enables automatic positioning adjustments, removing the need for manual repositioning scripts in JavaScript.

How does it allow for dynamic repositioning based on available space?

It supports fallback positions through CSS rules like @position-try and flip-block.

What browsers currently support the Anchor Positioning API?

As of now, it’s experimental and supported in Chromium-based browsers such as Chrome, Edge, and Opera (MDN Web Docs).

How can developers implement this feature using progressive enhancement?

Using @supports(anchor-name) in CSS and checking "anchorName" in document.documentElement.style in JavaScript helps ensure compatibility.

What are the syntax and key CSS properties involved in using the Anchor Positioning API?

Core properties include anchor-name, position-anchor, inset-area, and position-try-options for fallback handling.

How does it handle fallback positioning in case of space constraints?

Through position-try-options, developers can define multiple fallback zones (e.g., top → bottom → right → left).

Can the API replace JavaScript-based positioning solutions entirely?

Yes, for most tooltip and dropdown scenarios, but corner cases may still require JavaScript.

References

MDN Web Docs. (n.d.). Anchor Positioning API. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/anchor.
Google Chrome Developers. (2023). An Inside Look at the Anchor Positioning API.
CSS WG Drafts. (2024). CSS Anchor Positioning Level 1 Draft.
“`