如何使用css在一个div上设置一个div？

Question

我想在一个 div 上显示一个带有数据列表的 div（这个 div 有谷歌地图）。

因此，要在 div 中显示位置列表而不是 google map 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>

样式代码：

.air {
    background: #fff;
    width: 300px;
    padding: 20px;
    position: absolute;
    top: 1350px;
    left: 12px;
}

我从顶部 1350px 开始提供固定边距，但如果我在上面的谷歌地图 div 列表 div 上添加更多内容，那么它无法正常工作。

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

Answer 1

将您的“图例”div 放入您的地图中，并为您的地图提供position: relative 样式。

这样，子元素的 absolute 位置对于其父元素将是 relative，这意味着它会保留在父 div 中，即使您在父 div 上方/下方添加内容。

#mapcan {
  background: blue;
  position: relative;
}
.air {
  background: #fff;
  width: 300px;
  padding: 20px;
  position: absolute;
  top: 12px;
  left: 12px;
}
.content {
  height: 100px;
  border: 1px solid black;
}

<div class="content">content above</div>

<div id="mapcan" style="width:100%;height:200px">
  <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>

<div class="content">content below</div>

Answer 2

我想你喜欢这样： 用主 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>

css:

.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);
}

这里是 jsfiddle 代码：https://jsfiddle.net/aou5gmcv/

Answer 3

将 z-index: 0; 添加到底部 div 并将 z-index: 1 添加到顶部 div 并将 position: absolute; 添加到两个 div 中