4

Tengo un mapa y por encima quiero tener un contenedor que en un futuro será un modal para contener un formulario. El problema es que este aparece debajo y yo quiero que salga encima, he estado haciendo pruebas con position z-index etc pero nada termina de salir. ¿Como se hace?

Mi cabez me dice que debo tener un contenedor general (Gimnasios-Contenedor) y que sea el contenedor padre y que dentro tenga mapa y modal con una posición relativa y además jugar con los z-index

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

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

#ModalContacto {
  height: 300px;
  width: 60%;
  background-color: orangered;
  margin: auto;
  position: relative;
  top: 20%;
  z-index: 100;
}
<div id="Gimnasios-Contenedor">
  <div id="map"></div>
  <div id="ModalContacto"></div>
</div>

3 respuestas 3

8

Debes asignar al padre o ancestro un position: relative para que se transforme en el referente del modal al cual se le agrega un position: absolute;, para poder situarlo en coordenadas referentes al contenedor padre o un position: fixed, sí lo que deseas es que se posicione con respecto al tamaño total de la ventana y al map, te recomiendo colocarle un position: relative; para que el z-index funcione como quieres, ya que z-index, solo funciona en elementos que se le asigne la propiedad position, diferente al por defecto que es 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>

Como recomendación final, te recomiendo que no uses valores tan altos de z-index, por lo general en la mayoria de desarrollo o páginas funciona asignar del 1 al 20. Y en elementos flotantes permanentes como los menu flotantes o modales tipo lightbox, es que se usan valores altos como 100 o 1000.

Espero te haya aclarado, si tienes otra duda, escribeme un comentario. Éxitos.

8

Si lo que deseas es tener el div#ModalContacto por encima del div#map entonces debes colocarlo en posición absoluta y moverlo con coordenadas en la posición que desees tenerlo, cabe aclarar que el div padre debe estar en posición relativa.

#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>

2

Al div Gimnasios-Contenedor(padre) puedes poner position: relative; y al div ModalContacto(hijo) puedes poner position:absolute para que se situe arriba y con eso z-index ya estaria por demas(por eso lo elimine).

#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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.