在传单中的地图和标记之间放置徽标答案

【问题标题】：Place Logo between Map and Markers in Leaflet在传单中的地图和标记之间放置徽标
【发布时间】：2021-10-01 11:52:30
【问题描述】：

我有一个 Web 应用程序，其中包含整页传单地图和顶部的静态徽标，如下面的 sn-p 所示。

通过此实现，徽标浮动在所有地图元素之上。对于实际应用，最好将标志放置在地图和地图上的标记之间。这样，在平移地图时，徽标就不会隐藏标记。

到目前为止我尝试了什么：

仅修改 z-index 不起作用，因为 Leaflet 将图块、标记和其他地图元素组合在一个 div 中。
我还玩过Panes，并且能够将徽标放在地图和标记之间的自定义窗格上。但通过这种方式，徽标在随地图移动时不再是静态的。

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '&copy; <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>

【问题讨论】：

无法完成。您似乎已经对这个问题进行了大量研究，并且已经发现 Leaflet 将所有窗格分组在同一个 stacking context 中 - 并且不可能在两个块之间交错一个外部块（即在该堆叠上下文之外）堆叠上下文。
@IvanSanchez：我已经担心这是不可能的了。感谢您的澄清！

标签： javascript html css leaflet maps

【解决方案1】：

正如 Ivan Sanchez 在 cmets 中所说，在 Leaflet 中无法在地图和标记之间放置静态徽标。

我能想到的唯一解决方案是将徽标放在Pane 中，并使用 JavaScript 补偿地图的缩放和平移。但我想那会很不稳定。

【讨论】：