リーフレットのレイヤーコントロールにZ-インデックスを設定します

Question

私はリーフレットマップとフルスクリーンボタンを持っています。全画面ボタンを押すと、マップをオーバーレイするカスタムdivが表示されます。問題は、私のdivがコントロールレイヤメニューを隠していることです。私のdivを隠すようにメニューを表示するにはどうすればいいですか？

私のdivには、マップの前に表示される最小のZインデックスがあります。理想的には、メニューに高いz-インデックス値を与えたいと思います。

私は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

あなたのmapのdiv、直接HTML内の子としてあなたoverlay 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