css锚点定位前段时间就出来了。如果你和我一样不喜欢编写 css，这个新的 api 肯定会有所改善。
锚定位
css 锚点定位 api 允许开发人员轻松相对于其他元素（称为锚点）定位元素，无需额外的库或复杂的 javascript。此功能非常适合创建菜单、工具提示、对话框和其他分层界面。
使用此 api，您可以确保元素的大小/位置根据其锚点进行调整。这消除了手动调整的需要，并在构建动态、交互式布局时提供更流畅、响应更灵敏的体验。
什么是位置尝试？
anchor css 还推出了一个新的 css at-rule，称为 position-try。 当锚定元素不适合屏幕或容器时，它允许您定义锚定元素的后备位置。如果某个元素溢出，浏览器会自动选择下一个替代位置，确保它保持完全可见和功能正常。 position-try-fallbacks 属性可用于定义浏览器 try 的多个后备位置。早些时候，这可以通过运行一个侦听器来实现，该侦听器在每次视口更改后检查事情是否进展顺利。
这可以避免在使用下拉菜单、工具提示等时出现很多令人头疼的问题，因为现在我们不必编写自定义逻辑来检查溢出情况。
立即学习“前端免费学习笔记（深入）”；
演示
这是我使用上述 css 属性编写的代码的快速演示：
我那丑陋的导航栏中的子菜单会根据视口的宽度改变其位置。
代码是用react编写的。早些时候我必须使用效果来做到这一点。在我的效果中，我会检查子菜单元素是否跨越视口的边界。如果是，我会触发另一个重新渲染来更新子菜单的样式。由于 useeffect 在绘制之后运行，并且我们不希望用户在错误的位置看到子菜单，因此我必须为此使用 uselayouteffect。
现在我所要做的就是编写这样的 css：
.button-anchor { anchor-name: --anchorButton;}@position-try --bottom { position-area: bottom;}.menu-list { position-anchor: --anchorButton; border: 1px solid #000; font-family: sans-serif; width: 60px; font-size: 12px; display: flex; flex-direction: column; row-gap: 4px; padding: 8px; position: fixed; position-area: right span-y-end; position-try-fallbacks: --bottom;}
@position-try – 创建名为 –bottom 的规则。
锚点名称 – 将按钮设置为锚点元素。
position-anchor – 让菜单列表使用 –anchorbutton 作为锚元素。
position-try-fallbacks – 帮助列出要尝试的多个后备。这意味着即使 –bottom 失败，也可以有更多位置。
概括
anchor css 的出现为开发人员解决了一些非常有趣的用例。除了上述之外，系留定位变得非常容易。一切都纯粹基于 css，因此性能也很棒。 目前浏览器支持还不是很好，但我希望它很快就会被更多人采用。
以上就是CSS 新的 @position-try 的便利性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630030.html
微信扫一扫 
支付宝扫一扫 
