我有一张地图,在它上面我想要一个容器,将来它将成为一个包含表单的模式。问题是它出现在下面,我希望它出现在上面,我一直在用position
z-index
etc 进行测试,但最终没有出现。它是如何完成的?
我的头脑告诉我,我必须有一个通用容器(Gyms-Container),它是父容器,里面有一个地图和具有相对位置的模态,还可以玩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>
如果你想要的是
div#ModalContacto
上面的,div#map
那么你必须把它放在一个绝对位置,并在你想要的位置用坐标移动它,应该澄清div
父级必须在一个相对位置。您必须分配父级或祖先a
position: relative
以便它成为添加 a的模态的所指对象,以便将其放置在引用父容器或 a的坐标中,如果您希望它相对于总数定位窗口和地图的大小,我建议您放置 a以便 z-index 按您的意愿工作,因为z-index 仅适用于分配了 position 属性的元素,与默认值不同的是.position: absolute;
position: fixed
position: relative;
static
作为最后的建议,我建议您不要使用如此高的 z-index 值,通常在大多数开发或页面中它可以分配 1 到 20。并且在永久浮动元素中,例如浮动菜单或灯箱类型modals,就是使用了像100或者1000这样的高值。
我希望我已经澄清了,如果您有任何其他问题,请给我写评论。成功。
Gimnasios-Contenedor
您可以放置(父)div,也可以放置(子)position: relative;
div ,使其位于顶部,并且z-index已经太多(这就是我消除它的原因)。ModalContacto
position:absolute