告别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锚点定位，提升性能和可维护性。
➡️
