DIV 用 HTML5 和 CSS3 覆盖 Leaflet 地图

Question

我正在创建一个网站，我需要用 DIV 覆盖 Leaflet 地图，它有一条错误消息。

发生的情况是传单地图始终位于 DIV 上方并显示错误消息。

试了好几种方法都没有结果

谁能帮帮我？

HTML代码：

<!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/leaflet@1.6.0/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/leaflet@1.6.0/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代码： https://drsolutions.com.br/allmaps/estilos/styles.css

此致，迭戈

Answer 1

增加 div#mensagem_informativa 的 z-index 或相关 class 样式之一。当我将 div.mensagem_informativa_lat_long 的 z-index 从 99 更改为 400 时，这是我看到的：

DIV 用 HTML5 和 CSS3 覆盖 Leaflet 地图

DIV to overlay Leaflet map with HTML5 and CSS3

css

leaflet