盼了好久，最近 Chrome 125终于迎来了CSS 锚点定位的正式支持。这是一个和 CSS 滚动驱动动画一样，足以颠覆整个 Web 开发领域的新特性。有了这个特性，很多以前强依赖 JS 的方式，都可以纯 CSS解决，并且实现起来更加简单、更加灵活，一起看看吧！
可以看到，在切换tab时，底下的背景是可以无缝过渡的。在以前，我们要实现这样的功能，必须要借助 JS来获取当前点击元素的尺寸和位置，但现在，只需要借助 CSS 锚点定位就能轻松实现了。
位置信息前面以及提到了，用anchor(left)和anchor(top)就可以了，那尺寸呢，需要用到anchor-size。
anchor-size(width) /*锚点元素宽度*/anchor-size(height) /*锚点元素高度*/利用这个特性，我们可以很轻松的实现这样一个效果，结构如下：
<nav class="tab"> <a class="item" href="#HTML" name="HTML">HTML</a> <a class="item" href="#CSS" name="CSS">CSS</a> <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a> <a class="item" href="#React" name="React">React</a> <a class="item" href="#Vue" name="Vue">Vue</a></nav>我们用伪元素来当做tab高亮背景，关键实现如下：
.tab::after{ content: ''; position: absolute; border-radius: 100px; background-color: rgba(65, 105, 225, 0.2); position-anchor: --anchor-el; width: anchor-size(width); height: anchor-size(height); left: anchor(left); top: anchor(top); transition: .3s; pointer-events: none;}.item:target{ anchor-name: --anchor-el;}这样就能轻松实现这个效果了，你也可以访问以下在线链接（Chrome 125+）
有时候定位元素会处于屏幕边缘，当没有足够空间显示时，可以通过position-try-options来设置一个备用位置。
举个例子，比如一个气泡，默认是朝上的，当滚动到屏幕边缘时会自动朝下，示意如下：
这种情况就可以用@position-try来实现了，具体做法是这样的。
先通过position-try-options指定一个变量名，比如--bottom。
tooltip{ position: fixed; position-anchor: --anchor-el; inset-area: top; position-try-options: --bottom;}然后通过@position-try来定义规则。
@position-try --bottom { inset-area: bottom;}这样就实现定位元素位置自动调整了。
除此之外，还有一种便捷写法，直接给position-try-options指定以下关键字。
position-try-options: flip-block; /*垂直翻转*/position-try-options: flip-inline; /*水平翻转*/这样就无需@position-try定义了，实现更简单。
当然，我觉得这个功能还是稍显不足的，比如当气泡带有箭头时，虽然也能翻转，但是却无法改变箭头的位置，也就是无法查询到当前是否已经翻转了，就像这样。
首先是点击出现，这个就是popover的功能了，通过popovertarget和popover属性，将两者结合起来，就能轻松实现点击出现菜单的功能。
<button class="btn" popovertarget="more"></button><div class="menu" id="more" popover> <button class="item">编辑</button> <button class="item">删除</button></div>然后就定位，利用CSS锚点定位，将菜单定位到按钮的右下方，也就两三行代码的事。
.btn{ anchor-name: --menu;}.menu{ position-anchor: --menu; inset-area: bottom span-right;}这样就能轻易实现悬浮菜单了，你也可以访问以下在线链接（Chrome 125+）
在codepen上找到了一个更完善的多级菜单案例。
https://codepen.io/jh3y/pen/dyLjbwG
介绍了这么多，一下子肯定难以接受，多回顾几遍就明白了，至少可以知道锚点定位是干嘛的，如果以后有类似的需求也有一定的方向，下面总结一下本文要点
最近几年CSS更新的确实有点太快了，很多以往的疑难杂症都有了新的解决方式。但是很多时候学这些好像暂时没啥用，毕竟可能 5 年以后才用得上。但是原生特性不像其他，一个框架两三年就有可能被淘汰，或者有新的替代品出现，原生的学到了就学到了，只要web存在的一天，就永远都不会过时，所以也不亏是吧。
[1]CSS anchor (codepen.io)： https://codepen.io/xboxyan/pen/dyEVVPb。
[2]CSS anchor nav (codepen.io)： https://codepen.io/xboxyan/pen/zYQpvqg。
[3]CSS anchor position-try-options (codepen.io)： https://codepen.io/xboxyan/pen/dyEJYRO。
[4]CSS anchor menu (codepen.io)： https://codepen.io/xboxyan/pen/qBGpOKq。
本文链接：http://www.28at.com/showinfo-26-101375-0.htmlCSS锚点定位终于来了！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： ES13 中最具变革性的五个 JavaScript 功能
下一篇： 软件版本号为什么那么奇怪？你知道吗？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号