Superpose elements

You must assign to the parent or ancestor a position: relative to be transformed into the referent of the modal to which a% is added position: absolute; , for to place it in coordinates referring to the parent container or a position: fixed , if what you want is to be positioned with respect to the total size of the window and to map , I recommend placing a position: relative; for the z-index to work as you want, since z-index, only works on elements that are assigned the position property , different from the default that is static .

#Gimnasios-Contenedor {
  padding: 20px 0;
  position: relative;
}

#map {
  height: 400px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
  position: relative;
  z-index: 50;
  background-color: cyan;
}

#ModalContacto {
  height: 300px;
  width: 60%;
  background-color: orangered;
  margin: auto;
  position: absolute;
  top: 20%;
  z-index: 100;
  background: whitesmoke;
}

<div id="Gimnasios-Contenedor">
  <div id="map">mapa</div>
  <div id="ModalContacto">modal</div>
</div>

As a final recommendation, I recommend that you do not use such high values of z-index , usually in the majority of development or pages it works to assign from 1 to 20. And in permanent floating elements like floating menus or lightbox manners, is that high values are used as 100 or 1000.

I hope you have clarified, if you have another question, write me a comment. Successes.

If what you want is to have the div#ModalContacto above the div#map then you must place it in absolute position and move it with coordinates in the position that you want to have it, it is clear that the div parent must be in relative position.

#Gimnasios-Contenedor {
  padding: 20px 0;
  position: relative;
}

#map {
  height: 400px;
  width: 100%;
  margin: auto;
  z-index: 50;
  background: black;
}

#ModalContacto {
  height: 300px;
  width: 60%;
  background-color: orangered;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: chocolate;
}

<div id="Gimnasios-Contenedor">
  <div id="map"></div>
  <div id="ModalContacto"></div>
</div>

Div Gimnasios-Contenedor (parent) you can put position: relative; and div ModalContacto (child) you can put position:absolute to be placed above and with that z-index would already be otherwise (that's why I deleted it).

#Gimnasios-Contenedor {
  padding: 20px 0;
  position: relative;
  background-color: red;
}

#map {
  height: 400px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
  z-index: 50;
}

#ModalContacto {
  height: 300px;
  width: 60%;
  background-color: orangered;
  margin: auto;
  position: absolute;
  top: 20%;
}

<div id="Gimnasios-Contenedor">
  <div id="map"></div>
  <div id="ModalContacto"></div>
</div>