告别JS浮层，全新的CSS Anchor Positioning锚点定位API
原文中文，约7400字，阅读约需18分钟。
📝
内容提要
本文介绍了CSS锚点定位的新特性，包括设置方法、居中定位和调整锚点位置。还介绍了@position-try和position-visibility属性的使用。可以通过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()函数用于设置浮层元素与锚点元素的尺寸关联，确保它们的宽度或高度一致。
🏷️
