CSS Anchor Positioning 锚点定位与弹层对齐实践

CSS Anchor Positioning 锚点定位与弹层对齐实践概述Anchor Positioning 为元素提供以另一个元素为参照的定位能力，减少 JS 计算与抖动。Chromium 已支持核心能力，Safari/Firefox 正在推进，建议提供 Popover/JS 回退。关键参数/概念（已验证）`anchor-name`：为锚点元素命名。`position-anchor`：在浮层上声明锚点引用与对齐方式。溢出处理：结合 `@position-try` 与边界判定实现自适应对齐。实践/示例button { anchor-name: --btn; } .menu { position-anchor: --btn; position: absolute; inset-area: bottom center; } 回退：在不支持的浏览器中以 Popover API 或 JS 定位库实现同等交互。验证方法支持性：特性检测 `CSS.supports('position-anchor: --x')` 并分支样式。稳定性：验证滚动与窗口变化下的对齐与溢出策略。注意事项与 Popover API 搭配时，确保焦点与可达性一致。谨慎使用复杂组合以避免布局计算开销。参考资料MDN/规范草案：CSS Anchor Positioning