Question

我想做一些类似于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;
}

Answer 1

试试这个：

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

任何其他内容应该是z-index高于0

Answer 2

问题是Leaflet会将您提供的<div>内的任何内容都吹掉。 Leaflet要求空<div>。

只需在地图的其余部分下面对地图进行z索引，该地图应该是地图元素的兄弟，而不是孩子。

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

Demo

Answer 3

 z-index: -1;

尝试此而不是0

抱歉，这不会工作，因为你在地图内有标题... 你将不得不重组你的HTML ..

Answer 4

将两个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;
}

如何使用地图作为背景？

4 个答案: