Sobrepor DIV ao mapa do Leaflet [RESOLVIDO]

1. Sobrepor DIV ao mapa do Leaflet [RESOLVIDO]

diegomrodrigues
(usa Fedora)

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/leaflet@1.6.0/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/leaflet@1.6.0/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;

}