CSS 锚点定位终于来了！

文章预览

盼了好久，最近  Chrome 125 终于迎来了 CSS  锚点定位的正式支持。这是一个和  CSS  滚动驱动动画一样，足以颠覆整个  Web  开发领域的新特性。有了这个特性，很多以前强依赖  JS  的方式，都可以纯  CSS 解决，并且实现起来更加简单、更加灵活，一起看看吧 一、快速了解 CSS 锚点定位 在过去，要实现一个元素定位，通常需要一个相对定位。比如这样一个 tooltip 如果不借助  JS ，让这个气泡位于按钮的正上方，就只能约束 HTML 结构，让这个气泡位于按钮内部 < button > BUTTON < tooltip > 我是tooltip tooltip > button > 并且设置按钮为相对定位，才能通过绝对定位实现气泡位于按钮的正上方 button { position : relative; } tooltip { position : absolute; bottom : 100 %; left : 50 %; transform : translateX ( -50 %) } 虽然可以实现，但是局限性很多。比如 HTML 要求严格，只 ………………………………