Question

我试图在另一个父div中显示一个map 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>

有人可以解释我如何更改CSS以便我的地图div被设置为仅保留在包含的父div中吗？感谢。

Answer 1

绝对位置会使你的元素流出正常的文档流，所以为了防止元素流出容器盒，你需要将position: relative;赋予容器元素，这样，你的绝对位置div将相对于父元素

#mapbox {
   position: relative;
}

在包含父div中定位map div

1 个答案: