When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal?
Below is the CSS code I have used for the overlays.
img#loading {
position: absolute;
z-index: 1;
left: 45%;
top: 30%;
width: 150px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}