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がトップに移動するため、正しく機能しません。
このdivから上または下にコンテンツを追加した場合は、google mapdivで修正したいと思います。このリストdivは影響しません。
「凡例」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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加