Tengo una aplicación web con un mapa de folleto de página completa y un logotipo estático en la parte superior, como se muestra en el fragmento a continuación.
Con esta implementación, el logotipo flota sobre todos los elementos del mapa. Para la aplicación real, sería mejor colocar el logotipo entre el mapa y los marcadores en el mapa. De esta forma, el logotipo no ocultaría los marcadores al desplazarse por el mapa.
Lo que probé hasta ahora:
z-index no funciona, porque Leaflet agrupa mosaicos, marcadores y otros elementos del mapa en un solo div . var map = L.map("map"); L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); L.marker([51.5, -0.09]).addTo(map); map.setView([51.505, -0.09], 13); html, body { margin: 0; } #map { width: 100vw; height: 100vh; } #logo { padding: 20px; position: absolute; z-index: 500; top: 10px; left: 50%; transform: translate(-50%, 0%); width: 300px; max-width: 50%; color: #255c99; background-color: #7ea3cc; border: 2px solid #255c99; text-align: center; } <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/> <div id="map"> <div id="logo">Logo</div> </div>Como indica Iván Sánchez en los comentarios, no es posible colocar un logotipo estático entre el mapa y los marcadores en Leaflet.
La única solución que se me ocurrió es colocar el logotipo en un panel y compensar el zoom y la panorámica del mapa con JavaScript. Pero supongo que sería bastante tambaleante.