在包含的父div中定位地圖div

Question

我試圖在另一個父div中顯示地圖div。

更具體地說，我希望<div id='map'></div>只出現在div id="mapbox"內。我遇到的問題是地圖顯示在包含div id="mapbox"之外。頁面上的其他地方必須有一些CSS導致地圖顯示不正確。

<div class="g12" id="mapbox" style="display:none">   
<h1 style="padding-left:7px; padding-bottom:14px;">MapBox API</h1> 

<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script> 
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' /> 

<style> 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 

<div id='map'></div> 

<script> 
    mapbox.auto('map', 'examples.map-zr0njcqy'); 
</script> 

有人能解釋讓我的地圖格的樣式來只停留包含父DIV中我會如何改變CSS？謝謝。

Answer 1

絕對位置會讓你的元素流出正常的文檔流，所以爲了防止元素流出容器盒，你需要給容器元素賦予position: relative;，這樣，你的絕對位置div將相對於母元素

#mapbox { 
    position: relative; 
}