之前说过，使用
实际上，这篇文章跟 Vue3 的关系不大，只是通过 Vue3 讲解一类 Overlay 的设计方法。
原理
要实现相对于某一元素的 Overlay 需要依靠两个元素，Origin 和 Panel，Origin 表示相对于的元素，而 Panel 表示 Overlay 本身，实现方法主要有两种。
1.基于 position 的absolute 和 relative 特性，将 Origin 和 Panel 形成相互依赖的关系。2.Overlay 基于 Origin 做固定偏移的双盒子定位法，也就是本文需要讲解的方法。
实现
首先，通过，能够建立顶层 Overlay，也就是在根节点创建一个新的节点。
setup(_, ctx) { const originRef = ref(); const panelRef = ref(); const panelStyle = ref({ position: 'absolute' }); // ... return () => ( <> ref={originRef}>origin "#cdk-overlay-anchor"> 'fixed', top: 0, left: 0, right: 0, bottom: 0, height: '100vh', width: '100vw' pointerEvents: 'none'}}> ref={panelRef} style={panelStyle.value}> '100px', width: '100px' border: '1px solid black'}} /> > );}拿到这两者的 dom ref 后，需要通过实时计算 Origin 的盒子的大小和位置，来获得 Panel 的相对偏移。在 Vue 中，元素只有在 mounted 后才能获取得到，所以可以通过 composition-api 的 onMouted 来获取具体元素。然后再在 生命周期中 进行计算。
计算两个盒子的相对位置
如何计算 Origin 的大小和位置，以及获取其变化后的监听。Origin 的大小和位置，通过 getBoundingClientRect 这一 API 来获取，这一就可以开始计算 Overlay 的相对位置。假设我们要把Overlay放在Origin的正下方，计算函数应该是这样的。
const panelStyle = ref({ position: 'absolute' });onMounted(() => { const origin = originRef.value; const panel = panelRef.value; if (!origin || !panel) { return ; } const calculate = () => { const rect = origin.getBoundingClientRect(); // 原点为 origin 元素的底边中央正下方 const originX = rect.left + (rect.width / 2); const originY = rect.bottom; // panel的坐标为到原点的偏移 const panelRect = panel.getBoundingClientRect(); const panelX = originX - panelRect.width / 2; const panelY = originY; // 设置 panel 数据，触发节点变更 panelStyle.value.left = `${panelX}px`; panelStyle.value.top = `${panelY}px`; };});当然，你还可以计算各个不同方向的 Panel 坐标(比如，正左、正上、正下等)，排列组合一下，一共有81种不同的情况(每个点依赖于两个变量 X 和 Y，每个变量有三种不同的情况，左、中、右，或者，上、中、下)。
监听盒子的变化
在这里，我们将使用浏览器自带的API 来对他们进行监听。通过 MutationObserver 和 ResizeObserver，可以很轻松的监听 Origin 和 Panel 的大小和位置变化。
首先是监听 Origin 的大小和位置变化，这里采用的是 MutationObserver，因为导致位置变化的原因只能是 style，所以只需要监听 style 的变化即可。
const origin$ = new MutationObserver(calculate);origin$.observe(origin, { // 只需要拿到 attribute 的 style 的变化即可 attributeFilter: ['style'],});Panel 只需要监听其大小的变化，大小变化有一个更加完美的API， ResizeObserver。
const panel$ = new ResizeObserver(calculate);panel$.observe(panel);然后，需要在dom销毁前取消监听。
// dom销毁前取消监听onBeforeUnmount(() => { origin$.disconnect(); panel$.disconnect();});监听窗口事件
为了能够正确的获取变化，我们需要监听两个事件：resize 和 scroll.
// 为了能够在滚动事件捕获前进行计算，带有滚动条的子元素也会因此触发计算window.addEventListener('scroll', calculate, true);window.addEventListener('resize', calculate);最后，仍然要在销毁前取消事件。
// dom销毁前取消监听onBeforeUnmount(() => { window.removeEventListener('scroll', calculate, true); window.removeEventListener('resize', calculate);});至此，已经完成基本的双盒子定位法的 Overlay 的设计。
小结
通过双盒子定位来构建的 Overlay 能够有效规避 CSS 带来的问题 zindex 等一系列相关的问题，只用通过计算盒子之间的相对偏移，就能让 Panel 附着于 Origin 上，这样，实现类似下拉或者 Tooltip 等功能的时候，就会非常有用。同时，附上一个简单例子
( http://zcating.gitee.io/testhub/#/overlay)，希望能带来一些启发。
