Send google maps div on the back - css

Question

I have this situation
The popup comes out when trying to login. I would like it comes ON the google maps div
So, this is the style of my popup
.popup-inner {
max-width:500px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
z-index:9999999;
While the back becomes
.popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
and this is the popup
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<form action="#" th:action="#{/}" method="post" class="form-signin">
<div class="form-group">
//content of the form...
</div>
</form>
<p>
<a data-popup-close="popup-1" href="#">Close</a>
</p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
The map has is in a simple, while the pop
<div id="map"></div>
with this style
#map {
width:100%;
height: 600px;
z-index: 1;
}

Answer 1

just add z-index:2; to .popup
.popup {
z-index:2;
}

Answer 2

Did some changes in your code, look at my snippet there are also some comments which you should read.
Hopefully this would do the job for you!
.popup {
/*display:none; //change it back to its original*/
display:block;
width:100%;
height:100%;
top:0px; /* 0px is 0 by default cause there does not exist 0 pixels. So only 0 is ok */
left:0;
background:rgba(0,0,0,0.75);
}
.popup-inner {
position:fixed; /* changed position: absolute to fixed */
width:90%;
max-width:500px;
top:50%;
left:50%;
padding:40px;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:red;
z-index: 10;
}
#map {
width:100%;
height: 600px;
z-index: 1;
background-color: pink; /* used to check the positions, make sure to remove the line */
}
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<form action="#" th:action="#{/}" method="post" class="form-signin">
<div class="form-group">
//content of the form...
</div>
</form>
<p>
<a data-popup-close="popup-1" href="#">Close</a>
</p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
<div id="map"></div>