Design Sundae
← Journal
Web DevelopmentDesign Sundae Team

Chrome DevTools adds a visual editor for CSS anchor positioning

Easier anchor positioning in Chrome 155 and 156, plus a CSS tool for agents.

Chrome DevTools adds a visual editor for CSS anchor positioning cover

Tooltips, menus and popovers that stick to the element they belong to used to need JavaScript. CSS anchor positioning does it in CSS alone, and the October update to Chrome DevTools (Chrome 155 and 156, posted on 20 October 2026) makes it far easier to work with.

For people building interfaces

  • A visual position-area editor. Pick the area of the anchor grid you want right from the Styles pane, instead of guessing keywords.
  • Box overlays for anchored elements. Margin, padding, border and content now show on the page while you debug anchored layouts.
  • Smaller helpers. Toggle flex-wrap: wrap-reverse from the Flexbox editor, see inactive @starting-style rules, and use custom properties that start with three or more dashes.

For coding agents

DevTools for agents gains a get_css_styles tool, so an AI coding agent can read the computed and matched styles of an element, including pseudo-elements and @keyframes, instead of guessing from the source.

Our take

Anchor positioning is one of the CSS features we are most keen to use on client sites, because it removes a whole layer of positioning scripts. Better tooling makes that easier to recommend.

Sources