DIV to overlay Leaflet map with HTML5 and CSS3

Solution for DIV to overlay Leaflet map with HTML5 and CSS3
is Given Below:

I’m creating a site where I need to overlay the Leaflet map with a DIV, which has an error message.

What happens is that the Leaflet map is always above the DIV with the error message.

I tried several ways without a result.

Can anyone help me?

HTML Code:

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <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">
        <main class="conteudo">
            <div class="centro">
                <!-- Conteúdo -->               
                <br/>

<!-- ---------------------------------- -->             
<!-- MAP ----------------------------- -->
                <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>
<!-- MAP ----------------------------- -->
<!-- ---------------------------------- -->

                <br/>
                <!-- Conteúdo -->
            </div>
    
<!-- ---------------------------------- --> 
<!-- DIV ---------- -->
            <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/>
                The coordinates entered on the map do not belong to a property registered in this system. 
                <br/><br/>
                <input type="button" value="Fechar" class="botao_fechar" onclick="javascript:btn_fechar();">
            </div>
<!-- DIV ---------- -->
<!-- ---------------------------------- -->

        </main>
    </body>
</html>

CSS Code:
https://drsolutions.com.br/allmaps/estilos/styles.css

Div with map

Regards,
Diego

Increase the z-index of div#mensagem_informativa or one of the related class styles. When I change the z-index of div.mensagem_informativa_lat_long from 99 to 400, this is what I see:

error message above map