目前无法在 HTML 中通过 @position-try 配合 anchor-size() 实现弹出层匹配锚点尺寸，因为这两个特性都尚未被任何主流浏览器实现；它们属于 CSS Anchor Positioning 规范的实验性功能，Chrome、Firefox、Safari 均未支持，替代方案依赖 JavaScript 获取锚点尺寸或使用 Popover API 等成熟技术。
目前无法在 HTML 中通过 @position-try 配合 anchor-size() 实现弹出层匹配锚点尺寸，因为这两个特性都尚未被任何主流浏览器实现。
为什么 @position-try 和 anchor-size() 现在不能用
这两个是 CSS Anchor Positioning（CSS 锚点定位）规范中的实验性功能，属于 CSS Containment Module Level 4 的一部分：
-
@position-try是一个规则级语法，用于定义多个备选定位策略（类似“定位 fallback”），但目前没有浏览器解析它； -
anchor-size()是一个函数，本意是读取锚元素的宽高（如width: anchor-size(--my-anchor, width)），但它依赖底层锚点注册机制（anchor-name、anchor-default等），而该机制本身也未落地； - 截至 2024 年中，Chrome、Firefox、Safari 均未启用相关 flag，
caniuse.com上标记为 “No support” 且无开发路线图。
当前能替代的实用方案有哪些
如果目标是让 tooltip / popover / dropdown 等弹出层动态适配触发锚点（比如按钮）的尺寸，可用以下成熟方法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用 JavaScript 获取锚点
getBoundingClientRect()，再设置弹出层style.width和style.height； - 若使用 Popover API（
<div popover>），可通过popoverPosition属性 +beforetoggle事件手动同步尺寸； - CSS 中用
min-width: max-content或width: fit-content让弹出层内容自然撑开，再配合transform: translate()对齐锚点中心； - 框架层（如 React）可封装
useAnchorRect自定义 Hook，避免重复计算。
如果你看到 demo 跑起来了，大概率是假的
某些博客或 CodePen 示例看似实现了 anchor-size()，实际往往有这些情况：
立即学习“前端免费学习笔记（深入）”；
- 用 PostCSS 插件做编译时替换（把
anchor-size(--a, width)硬编码成120px），不具运行时响应性； - 混淆了旧版
position: anchor()（已废弃）和新版草案语法； - 演示页面启用了 Chrome 内部未公开的实验 flag（如
--enable-blink-features=CSSAnchorPositioning），但该 flag 在稳定版中已被移除。
真正需要响应式锚点尺寸对齐时，JavaScript 仍是唯一可靠路径；CSS 锚点定位虽方向明确，但离生产可用还有明显距离。
