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

概述Anchor Positioning 允许将一个元素声明为锚点，并让另一个定位元素相对于该锚点进行对齐与摆放，适用于浮层、气泡、菜单等动态布局场景。相比脚本计算，原生锚定更稳定且能与过渡/无障碍更好协作。语法与用法`anchor-name`：在锚点元素上声明锚点标识，例如 `anchor-name: --btn`。`position-anchor`：在定位元素上引用锚点，例如 `position-anchor: --btn`。`inset-area`：声明相对锚点的对齐位置（如 `top`, `bottom`, `top-start`, `right-center`）。回退策略：不支持的浏览器回退到常规定位与脚本计算；通过特性检测决定启用。示例：按钮气泡浮层锚定<button id="open" style="anchor-name: --open-btn">打开</button> <div id="popover" style="position: fixed; position-anchor: --open-btn; inset-area: bottom;">内容</div> <script> const btn = document.getElementById('open') const pop = document.getElementById('popover') btn.addEventListener('click', () => { pop.toggleAttribute('hidden') }) </script> 工程建议对齐与溢出：结合 `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-positioningCSS 规范讨论（CSSWG）：https://github.com/w3c/csswg-drafts/issues/6399