Javascript 将z索引设置为传单中的图层控件

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

我的div具有要显示在地图前面的最小z索引。理想情况下，我想给菜单一个更高的z索引值

我创建了一个代码笔示例。切换到全屏来理解我的意思

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);

---

您可以将您的

覆盖

div附加为

映射

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>

然后，将z索引设置为低于示例中的巨大数字。低至1的数字在这里实际有效，但在这种情况下，让我们尝试9：

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

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

---

您可以将您的

覆盖

div附加为

映射

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>

然后，将z索引设置为低于示例中的巨大数字。低至1的数字在这里实际有效，但在这种情况下，让我们尝试9：

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

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

---

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