在传单标签 HTML 中添加一些 div

Question

这是我的传单地图的概览。

我需要的是这样的：

像那样有一个新的 div 内部地图，但是当我这样尝试时 HTML代码

<div id='myMap' class='lorem'>
    <div class='ipsum'></div>
</div>

CSS代码

.lorem{
   position: relative;
   width: 100%;
   height: 100vh;
   z-index: 1;
}

.lorem .ipsum{
   position: absolute;
   width: 300px;
   height: 100%;
   z-index: 2;
   top: 0;
   left: 0;
   background: red:
}

但结果是红色 div 仍在地图内当地图（传单）刷新地图时，我可以看到红色div

我知道如果我喜欢这就是工作，但这不是我想要的

<div id='myMap' class='lorem'></div>
<div class='ipsum'></div> // with height is 100vh

Answer 1

我不确定你想要达到什么目的。

如果您想在地图旁边显示红色 div，您可能不应该将其嵌入到您的地图中 div。

如果你想让div成为地图的一部分，你应该给它设置一个绝对位置，然后玩z-index。

例如，

.ipsum {
  background: red;
  height: 100%;
  width: 100px;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
}

z-index 为 1000 时，您将位于地图图块上方，但在控制缩放之下。尝试更高，您的 div 将位于每个传单元素之上。

见https://jsfiddle.net/ft5c4euq/2/

在传单标签 HTML 中添加一些 div

Add some div inside leaflet tag HTML

html

css

maps

jquery

leaflet