如何使用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，但如果我上面的谷歌地圖的div列表格添加更多的內容去頂部，它的工作不正常。

我想修復它在谷歌地圖div如果添加更多的內容以上或以下從這個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

的底部股利和z-index: 1添加z-index: 0;頂端DIV 並添加position: absolute;您要這樣既div的

Answer 3

我的事： 裹兩分度，主要的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/