How can I position my modal relative to a parent element in my component?

Summary:

Steps to reproduce:

1. Set app element to the app root: ReactModal.setAppElement('#root');
2. Create a basic modal with props like these:

            </nav>
           <ReactModal
               isOpen={state.delete}
               onRequestClose={ () => { setState(prevState => ({ delete: !prevState.delete })) } }
               shouldCloseOnOverlayClick={true}
               className="h-auto m-auto card px-5 py-4"
               style={{
                   overlay: {
                       'background': 'rgba(138, 145, 153, .66)'
                   },
                   content: {
                       'width': '400px',
                       'marginTop': '25vh',
                   }
               }}
           >

1. Modal is positioned like a fixed element in the center of the viewport.

What I want

I want to position this modal relative to it’s parent component. This modal is for a user menu popup, and it needs to appear below a fixed navbar. The position of the user image is not static. The site is responsive, so the dropdown must be relative to that parent.

Link to example of issue:

https://www.google.com has a similar modal popup when you sign in with an account.

Here is an example image: https://imgur.com/KIykuAc

Any help would be apprecieted.

[cyruscuenca]

I have it set to my root. I’ll experiment with attaching it to the navigation bar by ID

[exaucae]

Have you tried using parentSelector property from the docs?