Как сделать положение модального окна статическим при масштабировании или изменении размера экрана ⇐ CSS

[Anonymous]

На сайте (написанном на React с использованием Typescript и Tailwind) есть модальное окно. Модальное окно реализовано с использованием библиотеки «react-modal» https://reactcommunity.org/react-modal/.
При стандартных размерах окна браузера проблем с модальным окном не возникает. Однако если пользователь изменяет размер окна или масштабирует его, модальное окно перемещается относительно своего родительского компонента.
Я бы хотел, чтобы окно модели оставалось статичным по отношению к родительскому компоненту (и, соответственно, по отношению ко всей странице) независимо от масштаба или размера экрана.
ParentComponent.tsx

Код: Выделить всё

const ParentComponent = () => {
return (






)
}

ModalWindow.tsx

Код: Выделить всё

const ModalWindow = () => {
return (
 {...}}
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'
)}
>

);
};

Ниже я схематически покажу, что происходит.
При размере окна по умолчанию и 100% масштабировании все выглядит великолепно (ModalWindow под ParentComponent)


Но когда я открываю разверните окна на весь экран или примените масштаб больше/меньше 100 %, модальное окно изменит свое положение относительно родительского компонента.


Хотелось бы сделать так, чтобы модальное окно не менялось его положение относительно родительского компонента

Подробнее здесь: https://stackoverflow.com/questions/782 ... zing-the-s