Question

我有一个全屏地图，其中有一个同级div出现在地图“上方”。 div是全宽3列flex，左列和右列包含信息面板（图中的绿色），中间的一个是空的（图中的粉红色）：

就用户而言，粉红色的列不存在。

我面临的问题是中心列阻止了地图上的拖动事件，将鼠标移到它上面会将指针从拖动手柄更改为指针。

似乎标准的解决方案是添加

pointer-events: none;

到阻止div。我已经尝试过了，但似乎没有什么区别，所以我想知道我是否缺少关于Leaflet的一些专门知识。

有人有什么想法吗？任何建议欢迎！：）

Answer 1

也许您可以给中心栏上一堂课。例如：

“中心列”类并添加一些css规则，如下所示：

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

Answer 2

原来是我犯了一个错误。由于我的地图是全屏显示，因此我为它的容器指定了以下样式：

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

将地图的z-index减小到面板下方似乎是错误的方法。删除z-index：-5000，并增加面板的z-index会得到相同的显示，但是没有问题！