Sobrepor DIV ao mapa do Leaflet [RESOLVIDO]

1. Sobrepor DIV ao mapa do Leaflet [RESOLVIDO]

Diego Mendes Rodrigues
diegomrodrigues

(usa Ubuntu)

Enviado em 01/08/2021 - 16:10h

Prezados,

Estou criando um site onde preciso sobrepor o mapa do Leaflet com uma DIV, que possui uma mensagem de erro.

O que acontece é que o mapa do Leaflet está sempre acima da DIV com a mensagem de erro.

Alguém pode me ajudar.

Código HTML:
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<title>...</title>
<!-- Meta ... -->
<link rel="stylesheet" type="text/css" href="estilos/styles.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="..." crossorigin=""/>
</head>
<body class="hero-image">
<header>
<!-- Cabeçalho -->
</header>

<main class="conteudo">
<div class="centro">
<!-- Conteúdo -->
<br/>

<!-- ---------------------------------- -->
<!-- MAPA ----------------------------- -->
<div class="esquerda">
<div id="map"></div>
</div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="..." crossorigin=""></script>
<script src="js/mapa.js"></script>
<!-- MAPA ----------------------------- -->
<!-- ---------------------------------- -->

<br/>
<!-- Conteúdo -->
</div>

<!-- ---------------------------------- -->
<!-- DIV QUE DESEJO SOBREPOR ---------- -->
<div id="mensagem_informativa" name="mensagem_informativa" class="mensagem_informativa mensagem_informativa_lat_long">
<div class="mensagem_informativa_titulo">
<img src="imagens/icon-close.png" width="20px" onclick="javascript:btn_fechar();"/>
&nbsp;
</div>
<br/>
As coordenadas informadas no mapa não pertentem a uma propriedade registrada neste sistema.
<br/><br/>
Por favor, tente novamente.
<br/><br/>
<input type="button" value="Fechar" class="botao_fechar" onclick="javascript:btn_fechar();">
</div>
<!-- DIV QUE DESEJO SOBREPOR ---------- -->
<!-- ---------------------------------- -->

</main>
<footer>
<!-- Rodapé -->
</footer>
</body>
</html>


Estilos em CSS:
#map {
height: 500px;
width: 960px;
margin-left: auto;
margin-right: auto;
}

.conteudo {
min-height: 100%;
margin: -170px auto 0;
}

.centro {
padding-top: 240px;
width: 960px;
margin-left: auto;
margin-right: auto;
}

.mensagem_informativa {
width: 400px;
height: 210px;
padding: 0px 15px;
background-color: rgb(202, 202, 202);
text-align: center;
flex-direction: row;
justify-content: center;
align-items: center;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-110px;
position:absolute;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: rgb(53, 53, 53);
box-shadow: 5px 5px;
visibility:hidden;
}

.mensagem_informativa_lat_long {
height: 240px!important;
z-index: 99!important;
}


Atenciosamente,
Diego M. Rodrigues


  


2. Re: Sobrepor DIV ao mapa do Leaflet [RESOLVIDO]

Diego Mendes Rodrigues
diegomrodrigues

(usa Ubuntu)

Enviado em 02/08/2021 - 07:21h

Deu certo com o
z-index: 1000; 
e
position: absolute; 


Atenciosamente,
Diego M. Rodrigues






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts