正確的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定位？

回答

相關問題