CSS Anchor Positioning

Tether one element's position and size to another element declaratively — tooltips, popovers, menus, error messages, and "magnetic" highlights — replacing the JavaScript measuring loops (Popper, Floating UI) that historically did this.

Anchor positioning lets any element be named an anchor and any absolutely/fixed-positioned element bind to it. The positioned element then reads the anchor's edges and size at layout time, so it stays tethered as the anchor scrolls, resizes, or animates — with no getBoundingClientRect loop on the main thread. Source: MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using, 2026-06-12

Association: name the anchor, bind the target

.anchor   { anchor-name: --a; }          /* declare an anchor */
.tooltip  { position: fixed;             /* must be absolute/fixed */
            position-anchor: --a; }       /* bind to the anchor */

The Popover API creates an implicit anchor reference when a popover is associated with its invoker via popovertarget/commandfor, so popovers and customizable <select> pickers get anchoring for free. Use anchor-scope to stop repeated components from all binding to the last anchor on the page. Source: MDN, 2026-06-12

Placement: three mechanisms

anchor-size() sizes the target from the anchor's dimensions: width: anchor-size(width) or inline-size: calc(anchor-size(self-inline) * 4). Source: MDN, 2026-06-12

Magnetic nav highlight (no JS)

The bookmarked recipe from Jhey Tompkins moves the anchor-name onto whichever <li> is hovered with :has(), then a single ::before pill reads the anchor's geometry and CSS transitions glide it between items:

li:has(a:is(:hover, :focus-visible)) { anchor-name: --a; }
ul::before {
  position-anchor: --a;
  left:   anchor(left);
  top:    anchor(top);
  width:  anchor-size(width);
  height: anchor-size(height);
  transition: 0.2s; /* the magnetic glide */
}

One pseudo-element follows the active link — the entire interaction is declarative CSS. Source: X/@jh3yy, 2026-05-04 (1,553 likes, 1,804 bookmarks). Collected with Jhey's other recipes in Jhey CSS Techniques.

The reviewed video contact sheet shows the same highlight pill following horizontal and vertical menu layouts. That is the reusable point: the active geometry is owned by layout, so the effect survives orientation changes without a JavaScript measuring loop.

Overflow fallbacks and conditional hiding

The module also solves the "tooltip flips offscreen" problem in CSS: declare alternate placements with @position-try / position-try-fallbacks and the browser picks the first that fits. position-visibility hides the positioned element when its anchor scrolls out of view. This is the part that previously required Floating UI's flip/shift middleware. Source: MDN, 2026-06-12

Browser support — enhancement only

Not Baseline yet. Treat as progressive enhancement and gate it: @supports (anchor-name: --x) { … }, with a sane static fallback (Floating UI or simple position: absolute) for engines that lack it. Pairs naturally with the Popover API and <dialog>. Source: MDN, 2026-06-12

---

Timeline

• 2026-06-12 | Page created from the @jh3yy magnetic-nav bookmark (1,804 bookmarks), promoted out of the X Bookmarks: CSS & Frontend Techniques techniques list into a full feature page; researched against MDN anchor-positioning guide (anchor(), position-area, anchor-size(), @position-try, Popover API integration, Chromium-only support). Source: X/@jh3yy, 2026-05-04 + MDN, 2026-06-12
• 2026-07-02 | Reviewed the local thumbnail and video contact sheet; preserved the horizontal/vertical magnetic-nav proof as artifact evidence. Source: wiki/assets/x-bookmarks/2051284375434633673/image-01.jpg; X video URL in enriched record