Question

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

我曾经尝试过使用叠加层，z-index和其他CSS工具，但是无论我怎样尝试，地图似乎都可以完全覆盖卡片的所有内容。是否可以通过这种方式使用React组件？

请参阅下面的相关代码段。我确实知道'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;
}

谢谢。

Answer 1

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

Answer 2

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

使用react组件（Map）作为背景图像？

2 个答案: