在 React 中，固定位置的行为类似于相对

Question

我想将一些动画弹出窗口插入到我的 React Web 应用程序中。 它应该是固定位置，这意味着它将直接插入到页面中，而不考虑弹出窗口在模板中的实际位置。

但是代码的结果是popup是相对插入的，并且依赖于它的parents。

这是图像，您可以看到它位于它所在的子组件内。

我做错了什么？

我的弹出窗口：

export function animatedBoundInDownHoc(WrappedComponent) {

return function () {
    const [amm, setAmm] = useState(true);

    return (
        <div>
            <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>
        </div>
    );
}}

它显示的视图：

  <div>
            {/*<Try1Use/>*/}
            <h1 tabIndex={1} onBlur={() => {
                alert("blur pop up")
            }}

            >Blur?? </h1>
            <p>SHow animated? {this.state.globalConfiguration.showAnimatedPopup + ""}</p>

            <GlobalConfigurationContext.Provider value={this.state.globalConfiguration}>
                <GlobalConfigurationContext.Consumer>
                    {({showAnimatedPopup})=>{
                        if(showAnimatedPopup){
                            return(<Try1Use/>)
                        }
                    }}

                </GlobalConfigurationContext.Consumer>

CSS：

.page-area{
  position: fixed;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;/*define the horizontally centering*/
  align-items: center;/*define the vertically centering*/
  background: rgba(0,0,0, 0.5);


}

.animated-hoc1{
  width: auto;
}

用户界面结果：

检查结果：

Answer 1

只有当你给它 x,y 坐标时，固定才会考虑，组合 top,left,right,bottom

尝试以下方法：

.page-area{
  position: fixed;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;/*define the horizontally centering*/
  align-items: center;/*define the vertically centering*/
  background: rgba(0,0,0, 0.5);

  //positioning:
  top: 0;
  left: 0;
}