如何在导航栏后面显示 Mapbox 地图而不失去在地图上移动的能力？

Question

我有一个使用 Mapbox 的 React (Next.js) 项目。我想在不透明/透明的导航栏后面显示地图（由 react-map-gl 提供的地图组件）。

我可以通过将地图组件的z-index设置为-1来得到想要的视觉效果。 然而，我失去了移动地图的能力。我在这里做了一个屏幕录制插图：https://streamable.com/t3ghld。你可以看到，当我删除 z-index 并且地图与导航栏重叠时，我可以单击并拖动来四处移动。

这里是相关代码：

import Map from "react-map-gl";
import Navbar from "@/components/Navbar";

export default function MapMain() {
  console.log(process.env.NEXT_PUBLIC_MAP_KEY);
  return (
    <>
      <Navbar />
      <Map
        initialViewState={{
          longitude: -122.4,
          latitude: 37.8,
          zoom: 14,
        }}
        style={{
          zIndex: -1,
          width: "100vw",
          height: "100vh",
        }}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={process.env.NEXT_PUBLIC_MAP_KEY}
      />
    </>
  );
}

我还应该说，如果我从我的导航栏中删除位置：固定属性（以及从地图中删除 z-index，因为它不是必需的），那么它工作正常，如下所示：https：/ /streamable.com/z9ub53。我想这就足够了，但如果可能的话，我真的想要那种透明的外观。