Как разместить DIV в карте google DIV?

Question

Как вы можете видеть на this link, внизу страницы есть div, содержащий карту google. Я хотел бы поместить красный DIV (.blocktest) в область карты google. Проблема в том, что красный 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> 

---

СТИЛЬ:

#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

Это возможно, путем размещения DIV в absolute позиционирование.

Но в вашем случае, вы размещения blocktest DIV в map-canvas DIV, который переопределены Google карты сценарий. Так что измените, как

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

Answer 2

Насколько я знаю, Google переписывает innerHtml своего контейнера. Если вы разместите div внутри контейнера Google Maps, в этом случае вам не будет много хорошего.

Если бы я был вами, я бы разместил этот .blocktest div вне контейнера Google Maps. Я бы обернул их в div, который будет иметь атрибут стиля «position: relative» и дать div внутри атрибута «position: absolute» этого контейнера, чтобы они могли быть расположены относительно обертки div. Дайте контейнеру div google go более низкое значение z-индекса, чем div .blocktest, и вам хорошо идти.

Ваш код должен быть как:

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

Спросите, если у вас есть вопросы.

Cheers!