在传单标签HTML

如何解决在传单标签HTML

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

我需要的是这样的：

这样的地图内部就有一个新的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

解决方法

我不确定您要达到的目标。

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

如果您希望div成为地图的一部分，则应为其设置一个绝对位置，然后再使用z-index。

例如，

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

z索引为1000时，您将位于地图图块上方，但处于缩放控制之下。再试试看，您的div将位于每个传单元素的上方。

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