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

Question

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

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

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

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

Answer 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

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

set z-index to a layer control in leaflet

javascript

controls

z-index

layer

leaflet