javascript - 如何使用CSS在一个div上设置一个div？

Question

我想在一个 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>

样式代码:

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

我从顶部 1350px 开始固定边距，但如果我在上面添加更多内容，google map div list div 会到达顶部，所以它无法正常工作。

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

Answer 1

将您的“图例”div 放入您的 map 中，并为您的 map 指定一个position: relative 样式。

这样，子项的绝对位置将相对于其父项相对，这意味着它将保留在父级 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>