z-endeksini yaprakçıkta katman kontrolüne ayarlamak

Question

Bir broşür haritam ve tam ekran tuşum var. Tam ekran düğmesine bastığımda, haritayı kaplayan özel bir div gösteriyorum. Sorun, div'm kontrol katmanı menüsünü gizlemesidir. Menüyü divmamı gizleyecek şekilde nasıl gösterebilirim?

Benim div'm haritanın önünde görüntülenecek minimum z-dizinine sahip. İdeal olarak menüye daha yüksek bir z-endeksi değeri vermek istiyorum.

Bir kod örneği oluşturdum. Söylediklerimi anlamak için tam ekrana geçin.

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

doğrudan HTML ya da map div Çocukken overlay div ekleyebilirsiniz:

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

kullanarak veya javascript: Sonra

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

, z-endeksinizi daha düşük bir tha değerine ayarlayın n örneğinizde çok büyük bir sayı. 1 gibi düşük bir sayı aslında burada çalışır, ancak bu durumda en 9 deneyelim olacak: amaçladığınız gibi

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

Sonra bindirme gösterecektir.

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