css - CSS Anchor Positioning

CSS Anchor Positioning is a modern CSS feature that allows developers to position one element relative to another element without relying heavily on JavaScript. It is especially useful for tooltips, dropdown menus, popovers, floating labels, contextual menus, and other UI components that need to stay attached to a specific element on the page.

Traditionally, developers used combinations of position: absolute, JavaScript calculations, and libraries to dynamically place elements near buttons or input fields. CSS Anchor Positioning simplifies this process by introducing a direct relationship between an anchor element and a positioned element.

Why CSS Anchor Positioning Was Introduced

Before anchor positioning, developers often faced several problems:

  • Calculating element positions manually using JavaScript

  • Handling responsive layouts

  • Preventing overflow outside the viewport

  • Updating positions when the page resized

  • Managing complex tooltip and popup behavior

CSS Anchor Positioning solves these issues by allowing CSS itself to understand which element another element should follow or align with.

Core Concept

The main idea is simple:

  • One element becomes the anchor

  • Another element positions itself relative to that anchor

This creates a parent-child style relationship without requiring the positioned element to actually be inside the anchor element.

Basic Terminology

Anchor Element

The element that acts as the reference point.

Example:

<button class="btn">Profile</button>

Positioned Element

The floating element positioned relative to the anchor.

Example:

<div class="tooltip">User Settings</div>

Important CSS Properties

anchor-name

This property assigns a name to the anchor element.

Example:

.btn {
    anchor-name: --profileButton;
}

The double hyphen syntax resembles CSS custom properties.

position-anchor

This connects the floating element to the anchor.

Example:

.tooltip {
    position-anchor: --profileButton;
}

Now the tooltip knows which element it should follow.

anchor()

The anchor() function is used to retrieve positional values from the anchor element.

Example:

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

This means:

  • Place the tooltip below the anchor element

  • Align the left side with the anchor's left edge

Complete Example

HTML

<button class="btn">Hover Me</button>

<div class="tooltip">
    Tooltip Message
</div>

CSS

.btn {
    anchor-name: --myButton;
}

.tooltip {
    position: absolute;
    position-anchor: --myButton;

    top: anchor(bottom);
    left: anchor(left);

    background: black;
    color: white;
    padding: 10px;
}

How It Works

  1. The button is assigned an anchor name.

  2. The tooltip references that anchor.

  3. The tooltip automatically positions itself below the button.

  4. If the button moves, the tooltip follows automatically.

This creates dynamic positioning entirely through CSS.

Anchor Position Keywords

The anchor() function can use different positional keywords.

Common Keywords

Keyword Meaning
top Top edge of anchor
bottom Bottom edge
left Left edge
right Right edge
center Center position

Example:

left: anchor(center);

This aligns the element with the center of the anchor.

Using Anchor Positioning with Popovers

Anchor positioning works very well with the Popover API.

Example:

<button popovertarget="menu">
    Open Menu
</button>

<div id="menu" popover>
    Menu Content
</div>

CSS:

button {
    anchor-name: --menuAnchor;
}

#menu {
    position-anchor: --menuAnchor;
    top: anchor(bottom);
    left: anchor(left);
}

The popup menu automatically appears below the button.

Responsive Benefits

Anchor Positioning improves responsive design because positioned elements automatically adapt when layouts change.

For example:

  • Buttons move on smaller screens

  • Tooltips stay correctly attached

  • Menus reposition automatically

  • No manual recalculation required

This reduces responsive bugs significantly.

Advantages of CSS Anchor Positioning

Reduces JavaScript Dependency

Many UI interactions previously required JavaScript calculations. Anchor positioning moves this responsibility into CSS.

Cleaner Code

The positioning logic becomes simpler and easier to maintain.

Better Performance

Since the browser handles positioning internally, rendering can become more efficient than continuous JavaScript calculations.

Easier Maintenance

Developers can manage positioning entirely within CSS stylesheets.

Improved Accessibility

Properly aligned tooltips and menus help maintain better usability and keyboard navigation.

Common Use Cases

Tooltips

Position tooltips relative to buttons or text.

Dropdown Menus

Align dropdowns below navigation items.

Context Menus

Show right-click menus near the cursor target.

Form Validation Messages

Display error messages near form inputs.

Floating Labels

Attach labels dynamically to input fields.

Chat Bubbles

Align reactions or floating actions near messages.

Fallback Strategies

Since Anchor Positioning is still a newer feature, browser support may vary.

Developers should include fallback methods.

Example:

.tooltip {
    position: absolute;
    top: 100%;
    left: 0;
}

Then enhance with anchor positioning when supported.

Feature Detection

You can use @supports to detect browser support.

Example:

@supports (position-anchor: --test) {

    .tooltip {
        position-anchor: --myButton;
        top: anchor(bottom);
    }

}

This ensures compatibility with older browsers.

Difference Between Traditional Positioning and Anchor Positioning

Traditional Positioning Anchor Positioning
Requires manual offsets Automatic reference-based positioning
Often needs JavaScript Mostly CSS-based
Harder responsive handling Responsive by default
Complex calculations Simple declarative syntax
Maintenance heavy Easier to manage

Browser Support

CSS Anchor Positioning is still an evolving specification and may not yet be fully supported across all browsers. Chromium-based browsers often receive support earlier.

Developers should always check current compatibility before using it in production projects.

Future of CSS Anchor Positioning

Anchor Positioning represents a major shift in UI layout design. As browser support improves, developers may rely less on JavaScript libraries for popups, tooltips, and floating interfaces.

This feature is expected to become increasingly important in:

  • Modern component libraries

  • Responsive frameworks

  • UI design systems

  • Interactive web applications

It is part of the broader trend of making CSS more powerful and capable of handling advanced interface behavior directly within stylesheets.