Leaflet离线地图悬浮覆盖页面组件问题求助

本人对Web前端组件了解有限，若问题描述存在不足，欢迎指出。目前正在开发离线地图相关业务，采用tile layer结合Leaflet实现。页面除地图图层外还有诸多其他组件，预期效果为地图处于页面底层，仅中间部分可操作。但当前地图悬浮于所有组件之上，设置z-index及使用pane均无效果。

以下是实现代码：

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>

示例中头部背景设为红色，拖动地图时可清晰看到地图图层覆盖头部。希望能得到解决方案或示例指导，感谢帮助。

内容的提问来源于stack exchange，提问作者Redamancy-qian