Leaflet图层控件被低z-index的div遮挡，如何使其显示在上方？

问题 #

Leaflet的图层控件被页面上的'Key'和'Participants'两个div挡住了，想让控件显示在这两个div的前面。已知这两个div的z-index是20，Leaflet自带的层级设置里：

• .leaflet-pane的z-index是400
• .leaflet-top的z-index是1000
• .leaflet-control的z-index是800

按说这些值都远大于20，控件应该能显示在上方，但实际就是没效果。试过改Leaflet其他层级div的z-index也没用，用的是Leaflet v1.9.3。

解决方法 #

1. 给图层控件强制加更高层级+定位 #

z-index生效的前提是元素有非static的定位属性，直接给图层控件容器加样式：

.leaflet-control-layers {
  position: relative;
  z-index: 1001 !important; /* 设成比20大的数值就行，这里用1001确保覆盖 */
}

2. 检查地图父容器的层级 #

如果地图所在的父容器z-index比20小，那里面的控件层级再高也会被外面的div挡住。给地图容器加样式：

#your-map-container-id {
  position: relative;
  z-index: 30; /* 只要大于20就可以 */
}

3. 直接修改控件外层容器的层级 #

如果上面的方法还是不行，就直接改控件的外层容器.leaflet-top.leaflet-left：

.leaflet-top.leaflet-left {
  z-index: 1001 !important;
  position: relative;
}

4. 检查遮挡div的定位类型 #

如果'Key'和'Participants'用的是position: fixed，那普通relative定位的控件可能还是挡不住，这时候把控件的定位改成fixed试试：

.leaflet-control-layers {
  position: fixed;
  z-index: 1001 !important;
}

内容的提问来源于stack exchange，提问作者ChrisV