Tailwind CSS+Flowbite模态框被Leaflet地图覆盖的修复方案求助

我正在使用Tailwind CSS和Flowbite进行开发，采用Flowbite官方的模态框组件，但Leaflet地图始终显示在模态框上方，效果如图：

当前代码结构如下：

<div class="grid grid-cols-2 gap-4 ml-8 bg-gray-100 w-screen h-screen ">
    <div name="left_side" class=" mt-6 mb-6 h-max ">
     <Modal/>
</div>
<div class="min-h-full">
        <Map /> (leaflet map)
    </div>
</div>

烦请告知是否有快速修复该问题的方法？

这个问题是z-index层级冲突导致的，Leaflet地图容器默认z-index较高，会覆盖Flowbite模态框，以下两种方法可以快速解决：

• 方式一：提升模态框的z-index
  给Flowbite模态框的根容器添加更高层级的z-index类，比如Tailwind的z-[9999]（数值只要大于Leaflet默认的z-index即可，Leaflet地图容器默认z-index通常为400）。如果是自定义Modal组件，需确保模态框的遮罩层和内容层都设置足够高的z-index：

<!-- 示例：给Modal组件外层添加z-index类 -->
<div class="z-[9999]">
  <Modal />
</div>

• 方式二：降低Leaflet地图的z-index
  给Leaflet地图容器添加自定义样式或Tailwind类，设置更低的z-index：

/* 全局样式或组件内样式 */
.leaflet-container {
  z-index: 100 !important;
}

或者直接给地图容器加Tailwind类z-10，只要数值低于模态框的z-index即可。

注意：优先选择方式一，避免降低地图z-index影响其内部控件的交互层级。

内容的提问来源于stack exchange，提问作者equi