正确的CSS div定位？

我试过了，但是在定位的接口，将上面去谷歌地图的布局完全失败。我试图做的是这样的：正确的CSS div定位？

enter image description here

我的格式是这样的：

<div id="GoogleMap"> // the containing google maps layer 
    <!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map 
    <div class="map-topmenu"></div> //my interface 
    <div class="map-leftmenu"></div> //my interface 
    <div class="map-rightmenu"></div> //my interface 
    <div class="map-bottommenu"></div>//my interface 
</div>

我成功地使顶部的菜单水平居中，并从10px的屏幕的顶部。

我已经无法垂直居中左，右键菜单的，我开始注意到，居中左边的菜单所需的代码变得怪异。至于底部的菜单，我完全失败了 - 无论我尝试多种不同的方法。

任何人都可以请看看我的代码，让我知道我搞砸了？非常感谢！

body { 
    border: 0 none; 
    margin: 0; 
    padding: 0; 
    height:100%; 
} 
#GoogleMap { 
    position:absolute; 
    background-color: grey; 
    background-position: 50% 50%; 
    background-repeat: repeat; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
.map-topmenu { 
    height: 52px; 
    width: 353px; 
    background-image: url(http://i.imgur.com/KlyKR.png); 
    margin-top: 10px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
.map-leftmenu { 
    height: 263px; 
    width: 77px; 
    margin-left: 10px; 
    top:50%; 
    position: absolute; 
    margin-top: -150px; 
    background-image: url(http://i.imgur.com/Q3d1r.png); 
} 

.map-rightmenu { 
    background-image: url(http://i.imgur.com/si6dl.png); 
    height: 147px; 
    width: 280px; 
    margin-right: 10px; 
    float: right; 
    top:50%; 
} 
.map-bottommenu { 
    background-image: url(http://i.imgur.com/iDmuP.png); 
    height: 52px; 
    width: 312px; 
    margin-right: auto; 
    margin-bottom: 10px; 
    bottom: 0; 
    margin-left: auto; 
}

来源

2012-06-30 pufAmuf

使用绝对定位切缘阴性：

http://jsfiddle.net/PJTDy/3/

#GoogleMap { 
    position:absolute; 
    background-color: grey; 
    height: 100%; 
    overflow: hidden; 
    width: 100%; 
} 

.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu { 
    z-index:1; 
    position:absolute; 
    background:blue; 
} 
.map-topmenu { 
    top:0; 
    left:50%; 
    margin-left:-176px; 
    height: 52px; 
    width: 353px; 
} 
.map-leftmenu { 
    height: 263px; 
    width: 77px; 
    left:0px; 
    margin-top:-131px; 
    top:50%; 
} 
.map-rightmenu { 
    height: 147px; 
    width: 280px; 
    right:0; 
    top:50%; 
    margin-top:-73px; 
} 
.map-bottommenu { 
    height: 52px; 
    width: 312px; 
    bottom: 0; 
    left:50%; 
    margin-left:-156px; 
}

来源

2012-06-30 18:50:06 xandercoded

哇，谢谢Xander的！ – pufAmuf

有什么理由你定位的主要div容器（ID = “GoogleMap的”）绝对？您的底部菜单没有一个位置属性设置，否则，你可以同样的方式准确定位它的顶部有一个底部：0

来源

2012-06-30 18:52:31 Abhijit

正确的CSS div定位？

回答

相关问题