在 React 中，固定位置就像相对的一样

Question

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

但是代码的结果是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;
}

UI 结果：

检验员结果：

Answer 1

只有给它 x,y 坐标，结合上、左、右、下，固定才会被考虑

尝试以下操作：

.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;
}

在 React 中，固定位置就像相对的一样

Fixed positions acts like relative, in React

css

sass

webui

reactjs