set 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

Вы можете добавить свой 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 на что-то ниже n огромное количество в вашем примере. Ряд по цене от 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