Сделать другие маркеры ниже пользовательского всплывающего окна divIcon, а не сверху

ПРЕДПОСЫЛКА: У меня есть приложение для настольных браузеров, которое использует mapquest с плагином jslet. Я использую класс divIcon для маркеров, что позволяет мне использовать пользовательский HTML и стиль для маркеров. Каждый маркер divIcon также содержит скрытый div, который отображается, когда маркер зависает (используя класс hover). Я не использую ни маркер по умолчанию, ни всплывающее окно по умолчанию, встроенное в листовку, потому что пользовательский html дает гораздо лучший контроль над стилями.

ПРОБЛЕМА: Когда всплывающее окно отображается, любые другие маркеры на карте отображаются поверх всплывающего окна, а не снизу. Я попытался установить z-индекс всплывающего div на действительно большее число, но это не помогает.

ЧТО ОЖИДАЕТСЯ: когда вы наводите указатель мыши на значок, маркеры должны находиться за всплывающим окном, а не спереди.

ЭТО НЕ ВОПРОС О ДУБЛИКАТЕ: Этот вопрос не совпадает с этим. Этот вопрос заключался в том, что всплывающие окна листовок по умолчанию остаются поверх пользовательского div, который находится вне контекста z-индекса карты. Этот вопрос касается пользовательского всплывающего окна mouseover (а не всплывающего по умолчанию), остающегося выше других маркеров. Кроме того, мое решение полностью отличается от, по общему признанию, "взлома" javascript, предложенного в качестве обходного пути.

РАБОЧИЙ ПРИМЕР ПРОБЛЕМЫ: https://jsfiddle.net/mrrost/py2bqw7j/

Вот что такое код divIcon с пользовательским маркером/всплывающим окном выглядит так:

var pin = L.divIcon({ 
  html: `
    <div class='marker'>
        Pin
        <div class='popup'>
        Marker info. Other markers WILL BE on top of this div.
        This is BAD and a PROBLEM.
      </div>
    </div>
  `,
});

Это самые важные определения css:

#map {
    position: fixed;
}

/* hide default leaflet pin; div.popup is put inside here */
.leaflet-marker-icon {
    border: 0; margin: 0; padding: 0;
}    

div.popup {
  display: none;
  position: absolute;
}

div.marker:hover div.popup {
  display: block;
}

Ответ 1