1. Home
2. web
3. Introduction to CSS Anchor Positioning and Examples

Introduction

In web development, positioning floating elements—such as tooltips, popovers, dropdown menus, and hover cards—relative to a specific reference element (the anchor) has historically been a complex challenge.

To make floating elements follow anchor points on window resizing or page scrolling, developers traditionally relied on continuous JavaScript coordinate calculations (using getBoundingClientRect()) to dynamically alter inline styles. Libraries like Popper.js or Floating UI became industry standards for this reason. However, executing script loops on the main thread during scroll events frequently caused rendering lag and jank, especially on mobile devices.

The CSS Anchor Positioning API solves these drawbacks by handling floating coordinates natively in the browser. In this guide, we will explore the core features of this standard and walk through practical UI recipes.

1. What is CSS Anchor Positioning?

CSS Anchor Positioning is a native styling standard that lets you anchor an absolute or fixed-position element (the target) directly to another element (the anchor) entirely using CSS.

Core Benefits

• Zero JavaScript: Eliminates the need for resize listeners, scroll event observers, and custom coordinate calculation logic.
• Superior Performance: Position updates and rendering are offloaded directly to the browser’s compositor thread, rendering smooth visual updates at 60+ FPS.
• Layout Isolation: Absolute or fixed target elements can bypass parent boundary clipping constraints (such as overflow: hidden), especially when paired with the HTML <dialog> element or the native popover attribute.

2. Basic Setup and Syntax

Let’s look at a basic setup to bind a tooltip container relative to a button element.

HTML Structure

We declare an anchor element (button) and its target floating container (div).

<button class="my-anchor">Hover over me</button>
<div class="my-tooltip">This is a native CSS tooltip</div>

CSS Implementation

To tie the elements together in CSS, we follow three steps:

1. Declare a unique anchor-name identifier on the reference anchor element.
2. Define position: absolute and reference the identifier using position-anchor on the target.
3. Align coordinates via the anchor() positioning function.

/* 1. Set up the Anchor */
.my-anchor {
  /* Anchor names must be formatted as dashed identifiers, similar to CSS custom properties */
  anchor-name: --anchor-button;
}

/* 2 & 3. Format the Target */
.my-tooltip {
  position: absolute;
  position-anchor: --anchor-button;

  /* Pin the top of the tooltip to the bottom boundary of the anchor button */
  top: anchor(bottom);
  /* Place the horizontal center of the tooltip to the center of the anchor */
  left: anchor(center);
  transform: translateX(-50%);

  /* Styling defaults */
  background: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
}

With only a few lines of CSS, the tooltip snaps directly below the button. Even when the user scrolls the document, the layout engine updates the positions automatically.

3. Handling Edge Contraints with position-try

One major problem with floating components is clipping at viewport edges. If an anchor button is located near the bottom of a screen, positioning the tooltip below it forces it off-screen.

CSS Anchor Positioning handles viewport collisions dynamically using position-try-fallbacks.

.my-tooltip {
  position: absolute;
  position-anchor: --anchor-button;
  
  /* Preferred placement */
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);

  /* Define fallback positions when default bounds collide with viewport edges */
  position-try-fallbacks: flip-block, flip-inline;
}

• flip-block: Automatically flips the vertical alignment if there isn’t enough space (e.g., placing the tooltip above the anchor instead of below).
• flip-inline: Shifts horizontal positions if the tooltip is cut off by left or right viewport boundaries.

You can also write custom layouts using the @position-try directive:

@position-try --top-layout {
  bottom: anchor(top);
  top: auto;
  left: anchor(center);
}

4. Perfect Harmony with Popover API

CSS Anchor Positioning becomes incredibly powerful when paired with the HTML5 Popover API (popover attribute).

The Popover API lets you push elements onto the top layer of the document stack without JS. However, since top-layer elements exist outside the regular document layout flow, anchoring them next to regular buttons used to be difficult.

Anchor Positioning bridges this gap:

<!-- Interactive Popover Hook -->
<button class="menu-btn" popovertarget="my-menu" style="anchor-name: --menu-anchor;">
  Open Menu
</button>

<div popover id="my-menu" style="
  position: absolute;
  position-anchor: --menu-anchor;
  top: anchor(bottom);
  left: anchor(left);
  margin: 0;
">
  <ul>
    <li>Dashboard</li>
    <li>Settings</li>
    <li>Log out</li>
  </ul>
</div>

With this pattern, a fully accessible dropdown menu that sits above all overflows and matches the trigger button’s coordinates can be created without importing any JavaScript dependencies.

Conclusion & Browser Support

CSS Anchor Positioning is fully supported in Chromium engines (Chrome, Edge, Opera). Implementations and discussions are progressing rapidly for Safari and Firefox.

For production codebases requiring instant support across legacy browsers, an official CSS Anchor Positioning Polyfill is available.

Reduce your application bundle size, speed up frame rendering, and simplify your component styling by migrating to native CSS Anchor Positioning.