React中设置fixed定位的弹窗表现为relative受父元素影响，原因是什么？

fixed定位默认参考视口的规则存在例外：当fixed元素的任意上层父元素设置了非none值的transform、perspective、filter属性，或是设置了will-change: transform时，fixed元素的定位参考系会变更为该父元素，导致无法相对于整个视口居中。
你当前的场景中，弹窗组件嵌套在普通页面DOM结构中，只要其上层任意父元素存在上述CSS属性，就会触发这个问题。

方案1（最稳妥，推荐）：使用React Portal将弹窗挂载到body根节点 #

Portal可以让组件渲染到指定的DOM节点下，彻底脱离原有父组件的DOM层级，从根源避免上层CSS属性的影响。修改你的HOC代码如下：

import { useState } from 'react';
import { createPortal } from 'react-dom';

export function animatedBoundInDownHoc(WrappedComponent) {
  return function () {
    const [amm, setAmm] = useState(true);
    // 直接渲染到body节点下
    return createPortal(
      <div 
        className="page-area" 
        onClick={()=> setAmm(!amm)}
      >
        <div className={amm? "animate__animated animate__bounceInDown animated-hoc1" : "animate__animated animate__bounceOutUp animated-hoc1"}>
          <WrappedComponent />
        </div>
      </div>,
      document.body
    );
  }
}

方案2：补充CSS属性+排查上层父元素 #

1. 给.page-area补充top: 0和left: 0属性，避免部分浏览器下fixed定位的默认偏移：

.page-area{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0, 0.5);
}

2. 检查弹窗组件所有上层父元素的CSS，移除transform、perspective、filter、will-change: transform相关属性即可修复。

内容的提问来源于stack exchange，提问作者lingar