Elementary Standards
HTMLCSSWeb StandardsSEOBlogStart reading
Home / Blog / Chrome DevTools Gets a Visual Editor for CSS Anchor Positioning
Browsers

Chrome DevTools Gets a Visual Editor for CSS Anchor Positioning

The November 2026 DevTools release adds an interactive position-area editor to the Elements panel — point, click, and see your anchored element move, instead of guessing keyword combinations.

Chrome's "New in DevTools" post for November 2026 confirms what's been rolling out across Chrome 155 and 156: the Elements panel now ships a visual position-area editor for CSS anchor positioning, alongside a parallel update that lets AI coding agents inspect computed and matched CSS styles directly through DevTools. For anyone who has written position-area: top span-right and then reloaded the page four times to see if it was the right keyword, the editor removes the single biggest source of friction in anchor positioning: you can no longer get the grid wrong, because you're clicking a cell instead of typing a guess. Teams shipping production interfaces — tooltips, popovers, menus, anything that has to track an anchor without JavaScript — are the direct audience, and that's exactly the kind of layout work that separates a quick prototype from custom web development services built to hold up under real content and real screen sizes.

anchor(top)

What actually shipped

The Chrome for Developers release notes group the change under the Elements panel: a visual tool for CSS anchor positioning that lets you select position-area grid regions by clicking, rather than memorizing the nine-cell keyword vocabulary (top span-left, bottom-left, center span-all, and so on). Alongside it, implicit anchor selection and general CSS-authoring updates round out the Elements work, while the Application panel adds Web Install manifest and ad-provenance diagnostics shipped earlier in Chrome 155/156. Independent coverage of the release, including a write-up on PiunikaWeb, corroborates the same feature set: visual anchor tooling plus CSS style inspection support for coding agents.

Anchor positioning itself isn't new — position-anchor, anchor(), and the position-area shorthand reached broad Chromium support last year and gave developers a CSS-native alternative to JavaScript libraries like Popper or Floating UI for keeping a tooltip glued to its trigger. What was missing was tooling: the spec's grid-based mental model (three rows, three columns, keywords that span cells) is clean on paper and genuinely fiddly to author by hand, especially once you add fallback positions for when an anchor is near a viewport edge.

Why a visual editor matters more than it sounds

Anchor positioning fails silently in a specific, annoying way: get the position-area keyword wrong and the element doesn't error, it just renders in the wrong cell of the grid — stacked on top of its anchor instead of beside it, or clipped by a parent you forgot has overflow: hidden. Previously, catching that meant toggling values in the Styles pane and reloading to see where the box landed. The new editor turns that loop into direct manipulation: click a cell, watch the element move in the viewport in real time, and the matching keyword is written back into the rule for you. It's the same category of win DevTools delivered years ago for CSS Grid and Flexbox — a spec that's conceptually simple becomes dramatically faster to get right once you can see it instead of imagining it.

What this means for developers

When does this ship / timeline

This is live now, not a future proposal. It's bundled into the November 2026 "New in DevTools" roundup covering the Chrome 155/156 stable rollout that completed in October, so any current stable Chrome build already has it — no flag, no origin trial, no opt-in. Open DevTools, select an element with position-anchor set, and the position-area editor appears directly in the Styles pane.

The parallel change worth watching longer-term is DevTools exposing computed and matched CSS to coding agents. It's a smaller headline than the visual editor, but it points at where browser tooling is heading next: inspection surfaces built for both a human clicking around and an agent querying the same data programmatically.

Back to the blog
More notes

Keep reading