Z-index не работает должным образом

В настоящее время я работаю с Leaflet и Mapbox для создания пользовательской карты. Все работает нормально, пока я не начал работать над всплывающими окнами.

Моя ситуация: у меня есть настраиваемая панель навигации/панели управления, которая будет использоваться, но она должна быть позади любых открытых всплывающих окон (которых в настоящее время нет).

Я подготовил JSFiddle и этот снимок экрана

введите описание изображения здесь

Часть моего CSS

#map-nav {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
}
.leaflet-popup-pane, .leaflet-popup {
  z-index: 1000 !important;
}

В классах лифтов по умолчанию есть z-index из 7 (я думаю), я просто перезаписал его, чтобы быть на 100% уверенным. При проверке кода в браузере (FF/Chrome) я вижу, что z-индекс установлен правильно, и ни один другой элемент в .leaflet-popup не имеет значения z-index.

Я читал, что отрицательный z-index может решить эту проблему, но поскольку я работаю с несколькими элементами, мне бы очень понравилось менее "хакерское" решение - если оно есть. (Приветствуются также решения для JavaScript, следовательно, тег)

Как я вижу из проверки кода, Leaflet устанавливает некоторые атрибуты .leaflet-popup, которые по позиции: transform: translate3d(..), bottom и left.

Любая помощь приветствуется.

Edit:

Я могу поместить #map-nav внутри #map-content, и он все равно не будет работать fiddle. Однако, когда я пытаюсь подражать этому без всякой информации о карте, она работает.

ОТВЕТЫ

Ответ 1

Проблема в том, что #map-nav существует в совершенно ином контексте стека, чем маркер и его всплывающее окно.

То, как вы сейчас это настроили, вся карта находится за #map-nav. Таким образом, изменение z-index на #map-nav или .leaflet-popup-pane не поможет.

Отказ от ответственности: это ужасный, ужасный взлом. Если вы загляните в документацию Leaflet и найдете способ добавить свои собственные виджеты, я настоятельно рекомендую сделать это вместо этого.

Тем не менее, у меня есть кое-что, что работает (ваш пробег может варьироваться):

  1. Переместить #map-nav в .leaflet-map-pane
  2. Создайте MutationObserver и наблюдайте за изменениями атрибутов .leaflet-map-pane.
  3. Всякий раз, когда .leaflet-map-pane атрибут style .leaflet-map-pane, захватите его свойство style.transform и извлеките значения x и y. Инвертируйте эти значения и примените их к #map-nav.

var map = L.map('map-content', {
  zoomControl: false
}).setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a> contributors, <a href="#" onclick="location.href='http://creativecommons.org/licenses/by-sa/2.0/'; return false;">CC-BY-SA</a>, Imagery © <a href="#" onclick="location.href='http://mapbox.com'; return false;">Mapbox</a>',
  maxZoom: 18,
  id: 'rauschundrausch.cih3gisks00r8rlly0ob5s2me',
  accessToken: 'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("this is a<br>large<br>popup<br>in<br>terms of height");

var mapNav = document.getElementById("map-nav");

var mapPane = document.querySelector(".leaflet-map-pane");

var rxTranslate = /translate(?:3d)?\(([^\)]+)\)/i;

mapPane.appendChild(mapNav);

var observer = new MutationObserver(function(mutations) {
  if (mutations.some(m => m.attributeName === "style")) {
    // apply an inverse transform
    mapNav.style.transform = "translate(" + mapPane
      .style
      .transform
      .match(rxTranslate)[1]
      .split(",")
      .slice(0, 2) /* extract only x and y; discard z */
      .map(n => parseFloat(n) * -1 + "px") /* invert values */ + ")";
  }
});

observer.observe(mapPane, {
  attributes: true
});
#map {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#map-nav {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  z-index: 200;
  box-shadow: inset 0 0 0 1px #f00;
}
#map-content {
  width: 100%;
  height: 100%;
}
.leaflet-popup-pane {
  z-index: 3;
}
<link rel="stylesheet" href="#" onclick="location.href='https://unpkg.com/
/*  */