告别JS浮层，全新的CSS Anchor Positioning锚点定位API
💡
原文中文，约7400字，阅读约需18分钟。
📝
内容提要
本文介绍了CSS锚点定位的新特性，包括设置方法、居中定位和调整锚点位置。还介绍了@position-try和position-visibility属性的使用。可以通过CSS锚点定位改造现有组件。
🎯
关键要点
- Chrome 125正式支持CSS锚点定位，允许使用纯CSS实现元素相对锚点的绝对定位。
- 通过CSS实现按钮与图片的相对定位，DOM结构不再受限。
- 锚点设置有隐式和显式两种方法，隐式适用于1对1定位，显式适用于多个锚点元素。
- 锚点定位的上下左右属性与CSS的定位属性相对应，可以实现精确定位。
- 居中定位可以通过transform偏移、anchor-center属性或inset-area属性实现。
- inset-area属性用于边衬区布局，支持多种组合，增强布局灵活性。
- anchor-size()函数可以设置浮层元素与锚点元素的尺寸关联。
- 使用@position-try规则和position-try-options属性可以在视窗边界溢出时自动调整浮层位置。
- position-visibility属性提供多种显隐策略，解决滚动区域内元素的显示问题。
- 可以考虑将现有组件改造为使用CSS锚点定位，提升性能和可维护性。
❓
延伸问答
CSS锚点定位的主要特点是什么？
CSS锚点定位允许使用纯CSS实现元素相对锚点的绝对定位，支持隐式和显式两种锚点设置方法。
如何实现锚点的居中定位？
锚点的居中定位可以通过transform偏移、anchor-center属性或inset-area属性实现。
什么是@position-try规则，它的作用是什么？
@position-try规则用于在视窗边界溢出时自动调整浮层位置，以改善用户体验。
CSS锚点定位如何与现有组件结合使用？
可以通过检查CSS支持情况，将现有组件的定位交给CSS锚点定位来实现，提升性能和可维护性。
position-visibility属性的功能是什么？
position-visibility属性提供多种显隐策略，解决滚动区域内元素的显示问题。
如何使用anchor-size()函数？
anchor-size()函数用于设置浮层元素与锚点元素的尺寸关联，确保它们的宽度或高度一致。
➡️
