如何在缩放或调整屏幕大小时使模态窗口的位置静态

Question

该网站（用 React 编写，使用 Typescript 和 Tailwind）有一个模式窗口。 Modal 是使用“react-modal”库实现的 https://reactcommunity.org/react-modal/ .

对于标准浏览器窗口大小，模式窗口没有问题。但是，如果用户调整窗口大小或缩放，模式窗口将相对于其父组件移动。

我希望模型窗口相对于父组件（以及相应的整个页面）保持静态，无论缩放或屏幕大小如何。

ParentComponent.tsx

const ParentComponent = () => {
return (
            <>
              <button
                onClick={...} >
                <Icon/>
              </button>
              <ModalWindow/>
            </>
)
}

ModalWindow.tsx

const ModalWindow = () => {
  return (
    <ReactModal
      ariaHideApp={false}
      isOpen={...}
      onRequestClose={() => {...}}
      style={{
        overlay: {
          backgroundColor: 'transparent',
        },
        content: {
          outline: 'none',
        },
      }}
      className={clsxm(
        'absolute top-[50px] right-[-50px] h-[50px] w-[50px] translate-x-[-50%]  translate-y-[-50%] focus:outline-none'
      )}
    >
    </ReactModal>
  );
};

下面，我将示意性地展示正在发生的事情。 使用默认窗口大小和 100% 缩放，一切看起来都很棒（ParentComponent 下的 ModalWindow）

但是当我将窗口打开到全屏，或应用大于/小于 100% 的缩放时，模式窗口会更改其相对于父组件的位置。

我想以这样的方式进行：模态窗口不会改变其相对于父组件的位置

Answer 1

尝试设置父元素的相对位置

const ParentComponent = () => {
return (
            <div className={clsxm('relative')}>
              <button
                onClick={...} >
                <Icon/>
              </button>
              <ModalWindow/>
            </div>
)
}