I am using tailwind css and flowbite and I want to display a modal, I am using this code for the modal from flowbite but the map somehow displays on top of my modal, as you can see: enter image description here

<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>

你能告诉我有什么快速解决方法吗?

推荐答案

您可以将 map 元素的z-index修改为更低,也可以增加模式的z-index值.

try 将类似的类添加到 map 元素中:

.map-element {
   z-index: -1;
}

要修改模态的z-index,可以try 将其作为任意值添加到模态的class属性中:

<div class="z-[100]">

来自tailwindcss文档:https://tailwindcss.com/docs/z-index#arbitrary-values

Javascript相关问答推荐

我应该在redux reducer中调用其他reducer函数吗?

了解Node.js中的EventEums和浏览器中的addEventEums之间的关系

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

Chrome是否忽略WebAuthentication userVerification设置?""

google docs boldText直到按行执行应用脚本错误

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

Chromium会将URL与JS一起传递到V8吗?

无法访问Vue 3深度监视器中对象数组的特定对象值'

无法从NextJS组件传递函数作为参数'

如何将Cookie从服务器发送到用户浏览器

如何从HTML对话框中检索单选项组的值?

try 使用javascript隐藏下拉 Select

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

Phaserjs-创建带有层纹理的精灵层以自定义外观

未捕获语法错误:Hello World中的令牌无效或意外

如果NetSuite中为空,则限制筛选

如果我的列有条件,我如何呈现图标?

如何使用puppeteer操作所有选项

不允许在对象文本中注释掉的属性