CSS 锚点定位：Anchor Positioning 的锚定布局实践

概述 Anchor Positioning 允许将一个元素声明为锚点，并让另一个定位元素相对于该锚点进行对齐与摆放，适用于浮层、气泡、菜单等动态布局场景。相比脚本计算，原生锚定更稳定且能与过渡/无障碍更好协作。 语法与用法 - `anchor-name`：在锚点元素上声明锚点标识，例如 `anchor-name: --btn`。 - `position-anchor`：在定位元素上引用锚点，例如 `position-anchor: --btn`。 - `inset-area`：声明相对锚点的对齐位置（如 `top`, `bottom`, `top-start`, `right-center`）。 - 回退策略：不支持的浏览器回退到常规定位与脚本计算；通过特性检测决定启用。 示例：按钮气泡浮层锚定 ```html 打开

``` 工程建议 - 对齐与溢出：结合 `position-try`/`inset-area` 提供多个对齐候选，减少遮挡；必要时按视口边界调整回退。 - 与视图过渡协同：在锚定布局中配合 View Transitions 提升切换体验；确保焦点可达与可访问性。 - 兼容性：特性检测后启用锚定布局，对不支持的环境保持脚本回退，避免功能不可用。 参考与验证 - Chrome 平台文档（Anchor Positioning）：https://developer.chrome.com/docs/web-platform/css-anchor-positioning/ - web.dev Anchor Positioning 指南：https://web.dev/articles/css-anchor-positioning - CSS 规范讨论（CSSWG）：https://github.com/w3c/csswg-drafts/issues/6399