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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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