I am trying to position a div as an overlay on top of a Google Map. I can't seem to keep it contained within the Google Maps div though.
#wrapperMap {
position: relative;
}
#over {
background: #000000;
position: absolute;
top: 120px;
left: 10px;
z-index: 99;
width: 20%;
height: 380px;
opacity: 0.9;
filter: alpha(opacity=90);
color: #FFFFFF;
}
<div id="wrapperMap">
<div id="map-canvas2" style="width: 100%; height: 400px; border: 16px solid #e2e1e0;"></div>
</div>
<div id="over">
<br />
<div align="center">
<ul class="no_bullet">
<li class="school">SCHOOLS</li>
<li class="res">RESTAURANTS</li>
<li class="rec">RECREATION</li>
<li class="shop">SHOPPING</li>
</ul>
</div>
</div>
</div>
You can also see what is currently happening here, under "Current Projects -> Amenities" tab.
Ok, if you manage to get both the #over and #map-canvas2 inside a separate wrapper, you can pull it off pretty easy like so:
#over, set it to position: absolute, and if you want it to stretch to its parent height, then either use 100% height, or use top and bottom props.(dont forget to take into account any borders,margins etc.)Check out the example here and hopefully this will help you out.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다