Superponer elementos

publicado por: Anonymous

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

_x000D_

_x000D_

#Gimnasios-Contenedor {_x000D_
  padding: 20px 0;_x000D_
  position: absolute;_x000D_
}_x000D_
_x000D_
#map {_x000D_
  height: 400px;_x000D_
  width: 100%;_x000D_
  margin: auto;_x000D_
  margin-top: 20px;_x000D_
  z-index: 50;_x000D_
}_x000D_
_x000D_
#ModalContacto {_x000D_
  height: 300px;_x000D_
  width: 60%;_x000D_
  background-color: orangered;_x000D_
  margin: auto;_x000D_
  position: relative;_x000D_
  top: 20%;_x000D_
  z-index: 100;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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.

_x000D_

_x000D_

#Gimnasios-Contenedor {_x000D_
  padding: 20px 0;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
#map {_x000D_
  height: 400px;_x000D_
  width: 100%;_x000D_
  margin: auto;_x000D_
  margin-top: 20px;_x000D_
  position: relative;_x000D_
  z-index: 50;_x000D_
  background-color: cyan;_x000D_
}_x000D_
_x000D_
#ModalContacto {_x000D_
  height: 300px;_x000D_
  width: 60%;_x000D_
  background-color: orangered;_x000D_
  margin: auto;_x000D_
  position: absolute;_x000D_
  top: 20%;_x000D_
  z-index: 100;_x000D_
  background: whitesmoke;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *