0

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/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 Code: https://drsolutions.com.br/allmaps/estilos/styles.css

Div with map

Regards, Diego

Diego M. Rodrigues
  • 54
  • 7
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – IvanSanchez Aug 01 '21 at 19:58
  • Could you look in your browser's dev tools inspect facility to see what layers you have - e.g. z-index set by leaflet on the map. – A Haworth Aug 01 '21 at 20:00
  • [Make Select Option Display on top of Leaflet Map](https://stackoverflow.com/questions/68185120/make-select-option-display-on-top-of-leaflet-map/68245949#68245949) – Seth Lutske Aug 01 '21 at 20:40

1 Answers1

0

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

toms
  • 1,760
  • 1
  • 16
  • 17