Question

我尝试了，但完全失败了定位一个将超越谷歌地图布局的界面。我试图做的是：

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

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。

适当的css div定位？

2 个答案: