浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

文章预览

从 Chrome 125 开始，支持了一个全新的 CSS 特性 - Anchor Positioning，翻译过来即是 锚点定位 。 在之前的文章中，我们较为系统的讲述了这个新特性的使用，感兴趣的可以翻开一下前文： 抢先体验！超强大的 Anchor Positioning 锚点定位 [1] 。 在本文中，我们将使用 锚点定位 ，实现一个简化版本的 Popover 功能。下面，我们将一起一探究竟。 传统 Popover 功能 长话短说，在日常的前端需求开发中，有这么一种场景，我们需要 hover 某个具体元素，以弹出一个弹出层，像是这样： 如果我们将弹出层的 DOM 结构，写在某个具体的元素内部，譬如放在与被 Hover 元素同级。如果被 Hover 元素的祖先元素的某一层设置了 overflow: hidden ，则可能会出现这种截断现象： 为了避免这种情况的发生，一般情况下，常见的解决方案都是会将弹出层的 DOM，插入到页面最外层的 容器 ………………………………