Javascript 如何使用css在div上设置div？

我想显示一个div，其中包含div上的数据列表（这个div有谷歌地图）

因此，一个位置列表要显示在一个div中，而不是谷歌地图div

Html代码：

<div id="mapcan" style="width:100%;height:400px"></div>
<div class="air">
    <h3>Example project</h3>
    <ul class="nmap">
        <li id="_d0" class="bus_station">
            <div class="mlih">bus station</div>
        </li>
    </ul>
</div>

我给固定利润从顶部1350px，但如果我在上面添加了谷歌地图div列表div更多的内容到顶部，所以它不能正常工作

---

我想在google map div上修复它，如果在该div的上方或下方添加了更多内容。该列表div不会影响。

添加

z-index:0

到底部div和

z-index:1

到顶部div

---

并添加

位置：绝对

到两个div的

我希望您喜欢的东西如下： 用main div包装两个div并添加main div的相对位置。然后尝试以下代码：

<div class="map-section">
  <div id="mapcan" style="width:100%;height:400px"> map Div</div>
  <div class="air">
   <h3>Example project</h3>
    <ul class="nmap">
  <li id="_d0" class="bus_station">
 <div class="mlih">bus station</div>
 </li>
 </ul>
 </div>
</div>

下面是JSIDLE代码：

将您的“图例”div放入地图中，并为地图指定一个

位置：相对
样式

这样，子级的
绝对位置将与其父级
相对，这意味着它将留在父级div内，即使您在父级div的上方/下方添加内容


#mapcan{
背景：蓝色；
位置：相对位置；
}
.空气{
背景：#fff；
宽度：300px；
填充：20px；
位置：绝对位置；
顶部：12px；
左：12px；
}
.内容{
高度：100px；
边框：1px纯黑；
}
以上内容
示例项目


公交汽车站


下面的内容
添加一个请放置两个div绝对值，如果您想在div上方/下方添加更多内容，则这两个div绝对值将没有帮助。
<div class="map-section">
  <div id="mapcan" style="width:100%;height:400px"> map Div</div>
  <div class="air">
   <h3>Example project</h3>
    <ul class="nmap">
  <li id="_d0" class="bus_station">
 <div class="mlih">bus station</div>
 </li>
 </ul>
 </div>
</div>

.air {
    background: #fff;
    width: 300px;
    padding: 20px;
    position: absolute;
    top: 30px;
    left: 12px;
}
.map-section{
  position:relative;
}
#mapcan{
  background:rgba(0,0,0,0.4);
}