將z-index設置為傳單中的圖層控件

Question

我有一張傳單地圖和一個全屏按鈕。 當我按下全屏按鈕時，會顯示一個覆蓋地圖的自定義div。 問題是我的div隱藏了控制層菜單。 如何顯示隱藏div的菜單？

我的div的最小Z索引顯示在地圖的前面。 理想情況下，我想為菜單提供更高的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

Answer 1

您可以直接在HTML中將overlay div附加為map div的子級：

<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