Search pages

Search all CSS Showcase pages by name

CSS Anchor Positioning

Position elements relative to other elements without JavaScript. The Anchor Positioning API brings tooltips, popovers, and dropdown menus into pure CSS.

Chrome 125+Firefox — In DevelopmentSafari — In Development

The Problem Anchor Positioning Solves

For years, positioning a tooltip next to a button or a dropdown below an input required JavaScript. You’d calculate positions, handle scrolling, deal with viewport edges — it was a nightmare. Anchor Positioning changes everything.

Hover Tooltip
Hover the button to see a tooltip positioned with pure CSS — no JavaScript involved.
I'm positioned with CSS!
css
Key Concepts
The three building blocks of anchor positioning.
anchor-name

Defines an element as an anchor point that other elements can reference.

position-anchor

Links a positioned element to a named anchor, creating the relationship.

anchor()

Function that references anchor edges — top, bottom, left, right, or centre.

Basic Positioning

Position tooltips, badges, and notifications relative to any element. Hover each button to see a tooltip appear in a different direction.

Directional Tooltips
Tooltips can be placed on any side of the anchor element. Hover each button to see the tooltip.
Top
Right
Bottom
Left
css

Real-World Examples

Anchor positioning shines in common UI patterns. Here are two practical examples you can build with CSS alone.

Dropdown Menu
A menu anchored below its trigger button — no JavaScript positioning logic required.
ProfileSettingsLogout
css
Notification Badge
A badge anchored to the top-right corner of an icon button — always visible, no manual calculation.
3
css

Browser Support

CSS Anchor Positioning is a cutting-edge feature. Use feature detection to provide fallbacks for browsers that don’t support it yet.

Compatibility & Feature Detection
Use @supports to progressively enhance with anchor positioning.

Cutting-Edge Feature

CSS Anchor Positioning is brand new!

  • Chrome 125+: Supported
  • Firefox: In development
  • Safari: In development

For production: Use JavaScript fallbacks or wait for broader support. Consider using a polyfill or CSS feature detection with @supports.

css

Why This Matters

Anchor Positioning removes the need for thousands of lines of JavaScript positioning logic. It’s all declarative CSS now.

What You No Longer Need
Define relationships between elements and let the browser handle the rest.

Calculating element positions with getBoundingClientRect()

Handling scroll events to reposition tooltips

Detecting viewport edges and flipping positions

Heavy libraries like Popper.js for simple tooltips

Keep Learning

Explore other modern CSS features that pair brilliantly with anchor positioning.

Related Features

:has() Selector

Another game-changing modern CSS feature that changes how we write selectors.

Container Queries

Responsive design based on container size, not viewport size.

Custom Properties

Use CSS variables to create dynamic, reusable anchor names.