实现不受z-index及容器transform影响的React Popover基础组件

我最近在做一个Popover基础组件，核心要求是它能始终显示在页面所有元素的最上层。翻了不少知名UI库的实现，发现它们大多是把Popover放在页面底部，但还是离不开z-index——比如shadcn、MUI、Radix的Popover都是这么处理的。

其实自己写个简单的Popover不难，但纯CSS实现往往会碰到和这些库一样的问题：

• 绝大多数情况下都得手动设置z-index，还得担心会不会被其他元素的更高值给覆盖
• 如果Popover用了fixed定位，要是它的父容器加了CSS transform属性，就会创建新的堆叠上下文，直接导致Popover定位完全跑偏
• 要是父容器设了overflow: auto或者hidden，Popover很可能被截断，显示不全

不过纯CSS实现的Popover也有优点：API特别简单，上手成本很低。比如我理想中的API是这样的：

// Overlay是受控组件，显示/隐藏完全由open属性控制
<CSSOverlay open={isOpen}>
  <div>Content here</div>
</CSSOverlay>

但现实里找到的例子，要么是硬写一个超高的z-index碰运气：

<SomeOverlay open={isOpen} style={{ zIndex: 100000 /* 只能盼着没人用比这更高的数值 */ }}>
  <div>Content here</div>
</SomeOverlay>

要么是把Popover挂载到body上，这不仅可能还存在z-index的问题，还会遇到React上下文传递的麻烦——毕竟挂载到body后，就没法访问原本父组件树里的Provider内容了：

<SomeOverlay open={isOpen} appendToBody={true}>
  <div>Content here</div>
</SomeOverlay>

我之前做过一个纯CSS的Popover示例，就遇到了典型的z-index覆盖问题。

注：这是我之前在Stack Overflow上发布的问题重写版本，原问题已关闭。

备注：内容来源于stack exchange，提问作者roy riojas