传单地图漂浮在所有组件之上

Question

我不太了解web的前端组件。请指出问题描述中是否有不足之处。

我目前正在做一个离线地图相关的业务。我使用了与传单相结合的瓷砖层。整个页面除了地图层之外还有许多其他组件。理想的情况是，地图位于页面的底部，只有中间的一部分可以操作地图。如下所示pic简单演示我现在遇到的问题是，地图漂浮在所有组件的顶部，设置z-index和使用pane都没有任何效果。如图所示pic初始位置在所有组件的顶部自由拖动GIF我希望有人能给我一个解决方案，或者一个例子，来帮助我解决这个问题，谢谢你的指导。我的简单实现思路是这样的

initOffMap(){
var that = this
var latlng = L.latLng(30.584355, 114.298572);
that.offMap  = L.map('mapContainer', {
center: [30.584355, 114.298572],
zoom: that.zoom,
minZoom: 8,
maxZoom: 11,
maxBounds: L.latLngBounds(L.latLng(34.298747907678184,108.30837249755861), L.latLng(28.31487093107572, 116.70742034912111)),
});
that.offMap.createPane('labels');
that.offMap.getPane('labels').style.zIndex = -50;
var layer = L.tileLayer('http://localhost:8082/hb/{z}/{x}/{y}.png',
{
maxZoom: 11,
minZoom: 8,
autoZIndex: false,
pane: 'labels'
// zIndex: 111,
});
layer.addTo(that.offMap);
},

<div class="mapContainer" id="mapContainer">
<div class="head"></div>
<div class="leftProgressbar"></div>
<div class="leftcirle"></div>
</div>

的例子https://plnkr.co/edit/2k8mdrGDLhOQc93L?preview

你可以看看上面的例子，我将标题的背景设置为红色，当你向下拖动地图时，你可以清楚地看到地图图层漂浮在表面上并覆盖了标题

Answer 1

您已经标记了react-leaflet，但是该实现是常规传单实现。如果您确实使用react，则应该考虑使用react-leaflet包https://react-leaflet.js.org/这可能会解决你的问题。

文档中的例子只展示了核心实现，但是你可以在stackoverflow上找到很多你需要的代码。

如果你不使用react，请更新你的标签并让我知道，我会删除这个答案。