将 z-index 设置为传单中的图层控件答案

【问题标题】：set z-index to a layer control in leaflet将 z-index 设置为传单中的图层控件
【发布时间】：2016-04-11 09:11:24
【问题描述】：

我有一张传单地图和一个全屏按钮。当我按下全屏按钮时，我会显示一个覆盖地图的自定义 div。问题是我的 div 隐藏了控制层菜单。如何以隐藏我的 div 的方式显示菜单？

我的 div 具有要显示在地图前面的最小 z-index。理想情况下，我想为菜单提供更高的 z-index 值。

我创建了一个 codepen 示例。切换到全屏以了解我在说什么。

var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [grayscale, cities],
        fullscreenControl: true
    });

    var baseLayers = {
        "Grayscale": grayscale,
        "Streets": streets
    };

    var overlays = {
        "Cities": cities,
        "quite": quite,
        "long": long,
        "list": list,
        "of": of,
        "options": options,
        "at": at,
        "the": the,
        "list": list,
        "and": and,
        "some":some,
        "few": few,
        "more":more
    };

    L.control.layers(baseLayers, overlays).addTo(map);

http://codepen.io/corand/pen/wGyJOZ

【问题讨论】：

标签： javascript controls leaflet z-index layer

【解决方案1】：

您可以将overlay div 附加为map div 的子元素，或者直接在HTML 中：

<div id="map" style="width: 600px; height: 400px">
  <div id="overlay" class="overlay">I want this layer to be at the back of the control layer list</div>
</div>

或使用javascript：

var mapDiv = document.getElementById("map");
var overlayDiv = document.getElementById("overlay");
mapDiv.appendChild(overlayDiv);

然后，将您的 z-index 设置为低于示例中的巨大数字。低至 1 的数字实际上可以在这里工作，但在这种情况下，让我们试试 9：

.overlay{
    position: absolute; 
    width:200px; 
    height: 600px; 
    bottom: 50px; 
    right:10px; 
    background-color: black; 
    color: white; 
    padding: 10px; 
    z-index:9; 
}

然后，叠加层将按您的预期显示。这是您的示例的一个分支，在脚本中附加了覆盖：

http://codepen.io/nathansnider/pen/KzQjVv

【讨论】：

谢谢你，非常干净和解释性