DIV를 Google지도 DIV에 배치하는 방법은 무엇입니까?

Question

this link에서 볼 수 있듯이 페이지 하단에는 Google지도가 포함 된 div가 있습니다. Google지도 영역 내에 빨간색 DIV (.blocktest)를 배치하고 싶습니다. 문제는 빨간색 DIV가지도보다 z 색인 (지도 뒤쪽에 있음)에도 불구하고 표시되지 않는다는 것입니다. 이슈가 뭐야? 감사합니다

link

HTML :

<div id="fullcontainer"></div> 
<div id="map"><div id="map-canvas"><div class="blocktest">div that should be above the map</div></div></div> 

---

STYLE :

#fullcontainer { 
    margin-bottom:300px; 
    position:relative; 
    z-index:2000; 
    background: #F2F2F2; 
} 

.blocktest { 
    width: 60%; 
    background: red; 
    z-index: 30; 
position: absolute; 
    left: 20px; 
    bottom: 56px; 
} 
#map { 
    position:fixed; 
    z-index:1; 
    height:400px; 
    bottom:0; 
    width:100%; 
} 

#map, #map-canvas { 
    width: 100%; 
    height: 400px; 
    float: left 

} 

Answer 1

이 에 사업부를 배치하여, 수 포지셔닝.

그러나 귀하의 경우

, 당신은 구글에 의해 오버라이드 (override) 스크립트 매핑입니다 map-canvas DIV, 내 blocktest 사업부를 배치하고 있습니다. 그래서 같이 변경

<div class="blocktest">div that should be above the map</div> 
<div id="map-canvas"></div> 

Answer 2

내가 아는 한 Google은 컨테이너의 innerHtml을 다시 작성합니다. 귀하의 구글지도 컨테이너 안에 div를 배치, 그럴 경우, 당신을 잘하지 않습니다.

내가 너라면, .blocktest div를 Google지도 컨테이너 외부에 배치해야합니다. 나는 "position : relative"라는 스타일 속성을 가진 div에서 그들을 래핑 할 것이고, wrapper div에 상대적으로 배치 될 수 있도록 그 컨테이너 안의 div를 "position : absolute"속성을 부여 할 것이다. Google지도 컨테이너 div에 .blocktest div보다 낮은 z- 색인 값을 지정하면 좋은 결과를 얻을 수 있습니다.

코드가 같아야합니다 : 당신은 질문이있는 경우

<div id="fullcontainer" style="position: relative;"> 
    <div id="map-canvas" style="position: absolute; z-index: 1;"></div> 
    <div class="blocktest" style="position: absolute; z-index: 2;">div that should be above the map</div> 
</div> 

가 물어보세요.

건배!