css - 正确的css div定位？

Question

我试过了，但在定位一个高于谷歌地图布局的界面时完全失败了。我试图做的是：

但我最终得到了这个

我的格式是这样的：

<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;
}

Answer 1

使用带负边距的绝对定位：

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;   
}

Answer 2

绝对定位主容器 div (id="GoogleMap") 的任何原因？您的底部菜单没有设置位置属性，否则您可以将其定位为与底部相同的顶部：0。