告别JS浮层，全新的CSS Anchor Positioning锚点定位API
内容提要
本文介绍了CSS锚点定位的新特性，包括设置方法、居中定位和调整锚点位置。还介绍了@position-try和position-visibility属性的使用。可以通过CSS锚点定位改造现有组件。
延伸解读
浏览器支持与渐进增强
文章指出Chrome 125已正式支持CSS锚点定位，这意味着该特性目前主要在Chrome中可用。对于需要兼容多浏览器的项目，建议采用渐进增强策略：先检测浏览器是否支持anchor-name等属性，若不支持则回退到原有的JavaScript定位方案。这样既能利用新特性提升性能，又能保证旧浏览器的用户体验。
与popover的天然配合
文章强调锚点定位与popover弹出层是黄金搭档：前者负责定位，后者负责显隐与层级控制。这种组合几乎涵盖了弹出层定位的全部交互，有望成为未来浮层定位的最佳实践。开发者可以结合popover属性，用纯CSS实现下拉菜单、提示框等组件，减少对JavaScript的依赖。
自动重定位与显隐策略
通过@position-try规则和position-try-options属性，浮层在视窗边界溢出时可自动调整位置，例如使用flip-block实现垂直翻转。position-visibility属性则提供了always、anchors-visible、no-overflow三种显隐策略，解决滚动区域内元素的显示问题。这些特性让浮层行为更智能，减少了手动计算的需求。
现有组件的改造思路
文章提出了一种改造现有组件的方法：保持组件JavaScript代码不变，在开头添加if (CSS.supports('anchor-name: --myanchor')) { return; }，然后定位全部交给CSS实现。这样可以在支持新特性的浏览器中提升性能和可维护性，同时不影响旧浏览器的功能。这种渐进式改造思路值得在实际项目中尝试。
Q&A
CSS锚点定位的主要特点是什么？
CSS锚点定位允许使用纯CSS实现元素相对锚点的绝对定位，支持隐式和显式两种锚点设置方法。
如何实现锚点的居中定位？
锚点的居中定位可以通过transform偏移、anchor-center属性或inset-area属性实现。
什么是@position-try规则，它的作用是什么？
@position-try规则用于在视窗边界溢出时自动调整浮层位置，以改善用户体验。
CSS锚点定位如何与现有组件结合使用？
可以通过检查CSS支持情况，将现有组件的定位交给CSS锚点定位来实现，提升性能和可维护性。
position-visibility属性的功能是什么？
position-visibility属性提供多种显隐策略，解决滚动区域内元素的显示问题。
如何使用anchor-size()函数？
anchor-size()函数用于设置浮层元素与锚点元素的尺寸关联，确保它们的宽度或高度一致。
