I have a web application with a full-page Leaflet map and a static logo on top as shown in the snippet below.
With this implementation, the logo floats above all map elements. For the actual application, it would be better to place the logo between the map and the markers on the map. In this way, the logo would not hide the markers when panning the map.
What I tried so far:
z-index does not work, because Leaflet groups tiles, markers and other map elements in a single 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>As stated by Ivan Sanchez in the comments, placing a static logo between map and markers is not possible in Leaflet.
The only solution I could think of is to place the logo in a Pane and compensate the zooming and panning of the map with JavaScript. But I guess that would be quite wobbly.