2

我想做一些类似于 Foursqure.com 的事情。他们使用您当前位置的地图作为背景。我正在为我的地图使用Leaflet ，并显示了地图。我想如果我只是放一些类似的东西：

<div id="map">
    <h1>Welcome!</h1>
</div>

然后欢迎！会覆盖在地图上。但是，我很天真，这不起作用。谁能建议我可以做到这一点的方法？

编辑： 这是我的一些自定义 CSS。我正在使用 Twitter 引导程序，因此它也会发挥作用。html 几乎就是我在这里展示的内容。

#map {
    width: 100%;
    height: 400px;
    z-index: 0;
}

.leaflet-container {
    background: #ffffff;
}
4

4 回答 4

3

<div>问题是 Leaflet 会吹掉你给它的任何内容。Leaflet 需要一个空的<div>.

只需在其余内容下方对地图进行 z-index 索引，它应该是地图元素的兄弟，而不是子元素。

<div id="map"></div>
<h1>Welcome!</h1>

演示

于 2012-12-18T21:53:05.993 回答
2

试试这个：

#map{
  position:fixed;
  width:100%;
  height:100%;
  z-index:0;
}

任何其他内容都应使 z-index 高于 0

于 2012-12-18T21:16:03.560 回答
2 
 z-index: -1;

试试这个而不是 0

抱歉，这也不起作用，因为您在地图中有标题...您将不得不重组您的 html ..

于 2012-12-18T21:51:31.950 回答
1

将两个 div 作为兄弟，同时将地图作为第二个兄弟。两者都应该有一个绝对的位置。

在 HTML 代码中：

<div class="nxt-content">test</div>
<div id="map"></div>

在 CSS 代码中：

#map {
   z-index: 0 !important;
   position: absolute;
   height: calc(100% - 56px);
   width: calc(100% - 15rem);
}

.nxt-content {
  z-index: 1 !important;
  position: absolute;
  height: 100px;
  padding: 20px;
  color: white;
  background: yellow;
}
于 2019-08-30T09:50:59.093 回答