React-modal hides behind elements React-modal hides behind elements reactjs reactjs

React-modal hides behind elements


You need to set the z-index property on the Modal's overlay, which normally has a z-index of 0. The CSS class is .ReactModal__Overlay

Here is the pure-React way of doing it:

const customStyles = {  content : {    ...  },  overlay: {zIndex: 1000}};<Modal style={customStyles}>  ...</Modal>


.modal {    position: fixed;    z-index:9999;    top :0;    left:0;    right:0;    bottom:0;    background: #464b5e;    color: white;    outline: none;    padding: 3.2rem;    text-align: center;}