React-modal: Modal mostly hidden under my own elements

[mdodge-ecgrow]

Summary:

I am most likely doing something wrong. But the modal is mostly hidden under one of my main divs. I found by setting a high z-index on this div: 'ReactModal__Overlay ReactModal__Overlay--after-open' using the inspector, it fixed the issue. I am using a basic modal with only the 'isOpen' property to show it.

Steps to reproduce:

1. I added this code to my component where I want the modal.
   this is my import: import ReactModal from 'react-modal';
   And then I just create the modal at the very bottom of my return of my component. (I had to add extra spaces to this code because it appeared to be interpreting the HTML.)
   < ReactModal isOpen={true} > < p>this is my sweet modal!</p > < /ReactModal >
   2.
   3.

Expected behavior:

Modal should show on top above all content.

Link to example of issue:

I was able to put together a minimal example that showcases the issue. https://codesandbox.io/s/competent-bose-pobrh
The modal is getting added into App.js but same thing happens when I try and add it to my other components.

Additional notes:

[mdodge-ecgrow]

Finally figured this out!! For anyone else struggling with this issue, here is the answer that helped me: https://stackoverflow.com/a/49704094/571723

[iamaakashbasnet]

@mdodge-ecgrow Thanks!