使用反应组件（地图）作为背景图片？答案

【问题标题】：Using react component (Map) as background image?使用反应组件（地图）作为背景图片？
【发布时间】：2021-01-14 18:58:03
【问题描述】：

我有一个生成静态地图的反应组件。我想将该地图用作包含一些文本的 Bootstrap 卡片的背景。

我尝试过使用覆盖、z-index 和其他 CSS 工具，但无论我尝试什么，地图似乎都完全覆盖了卡片的所有内容。这种方式可以使用react组件吗？

相关代码的sn-p见下文。我知道'card-img' Bootstrap 类不适用于 LeafletMap 组件，因为它不是图像，这只是为了说明我正在尝试做的事情。

JSX：

<div className="card rounded my-3 shadow-lg current-card">
    <div className="card-top text-center">
        <div className="day-date my-3">
            <p>Saturday, March 15th</p>
            <span>...</span>
        </div>
    <LeafletMap className="card-img-top" />
</div>

CSS：

.day-date{
    position:absolute;
    width:100%;
    z-index:3;
}

谢谢。

【问题讨论】：

标签： css reactjs twitter-bootstrap bootstrap-4

【解决方案1】：

应该是可以的。很难说这么少的代码有什么问题，但让我猜一下：你是否在<LeafletMap> 组件上设置了position: relative？要使其正常工作，<LeafletMap> 组件不能是 position: static（通常是默认值）或 z-index has no effect。

【讨论】：

谢谢伙计，很高兴知道未来。检查了这一点，可能是问题的一部分，但主要问题是库生成的一个类，它的 z-index 为 400！干杯。

【解决方案2】：

所以我发现了问题，Leaflet 库在其地图上生成了一个名为“leaflet-container”的类，它的 z-index 为 400。我用 !important 覆盖了它，问题就解决了。

【讨论】：