I have a map and above it I want to have a container that in the future will be a modal to contain a form. The problem is that this appears below and I want it to appear above, I have been doing tests with position
z-index
etc but nothing ends up appearing. How is it done?
My head tells me that I must have a general container (Gyms-Container) and that it be the parent container and that inside it have a map and modal with a relative position and also play with thez-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>
If what you want is to have the
div#ModalContacto
abovediv#map
then you must place it in an absolute position and move it with coordinates in the position you want to have it, it should be clarified that thediv
parent must be in a relative position.You must assign the parent or ancestor a
position: relative
so that it becomes the referent of the modal to which a is addedposition: absolute;
, in order to place it in coordinates referring to the parent container or aposition: fixed
, if you want it to be positioned with respect to the total size of the window and map , I recommend you put aposition: relative;
so that the z-index works as you want, since z-index only works on elements that are assigned the position property , different from the default that isstatic
.As a final recommendation, I recommend that you do not use such high values of z-index , generally in most development or pages it works to assign from 1 to 20. And in permanent floating elements such as floating menus or lightbox-type modals, it is that high values like 100 or 1000 are used.
I hope I have clarified, if you have any other questions, write me a comment. successes.
Gimnasios-Contenedor
You can put the (parent) div and you can put the (child)position: relative;
div so that it is at the top and with that z-index would already be too much (that's why I eliminated it).ModalContacto
position:absolute