올바른 CSS div 위치 지정?

Question

시도했지만 Google지도 레이아웃을 초과하는 인터페이스를 배치하지 못했습니다. 내가 뭘하려고하는 것은 이것이다 :

But I ended up with this

내가 가진 형식은 다음과 같이이다 : 나는 수평을 중심으로 상단 메뉴를 만드는 데 성공

<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

메인 컨테이너 사업부 (ID = "GoogleMap으로")를 절대적으로 배치되는 어떤 이유? 하단 메뉴에는 위치 속성이 설정되어 있지 않습니다. 그렇지 않으면 맨 아래에있는 상단의 것과 정확히 동일한 위치에 배치 할 수 있습니다 :