Прозрачный div "выше" карты, перетаскивая карту

Question

У меня есть полноэкранная карта с соседним элементом, который появляется "над" картой. DIV - это полный столбец flex 3 ширины, левый и правый столбцы содержат информационные панели (зеленый цвет на диаграмме), центральный - пустой (розовый цвет на диаграмме):

Что касается пользователя, розовый столбец не существует.

Проблема, с которой я сталкиваюсь, заключается в том, что центральный столбец блокирует события перетаскивания на карте, перемещая указатель мыши по нему, изменяет указатель с маркера перетаскивания на указатель.

Кажется, стандартным решением для этого является добавление

pointer-events: none;

к блокирующему див. Я попробовал это, и это, кажется, не имеет никакого значения, поэтому мне интересно, есть ли какие-то специфические знания для Leaflet, которых мне не хватает в этом отношении.

У кого-нибудь есть идеи? Любые предложения приветствуются! :)

Answer 1

Оказывается, это из-за ошибки, которую я сделал. Так как моя карта была полноэкранной, я добавил в нее следующие стили:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -5000;

Похоже, что сокращение z-индекса карты под панелями было неправильным способом сделать это. Удаление z-индекса: -5000 и увеличение z-индекса панелей привело к тому же отображению, но без проблем!

Answer 2

Может быть, вы можете дать центральному столбцу класс. например:

класс "центр-колонна" и поместите некоторое правило CSS, например:

.center-column {
    position: relative;
    z-index: -10;
}