Bản đồ Google đầy đủ và CSS

Question

Tôi có bản đồ google đầy đủ chiều rộng trên một trang bằng cách sử dụng height="100%" và width="100%". Tôi muốn biết đặt một số thứ div css trên đầu trang của nó. Tôi đọc rằng việc sử dụng các giá trị âm như margin-top: -500px; sẽ hoạt động và chúng thực hiện, tuy nhiên khi tôi cố gán màu cho nền của div, nó không hiển thị màu trên bản đồ, nó sẽ hiển thị nó dưới nó, mà isn ' Tôi muốn gì cả. Có một giải pháp cho điều này? Code:

<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe> 

<div class="content"> I want this text to be in a div box that has a black background. <br /> </div> 

Kiểu:

.content { 
    margin-top: -500px; 
    width: 390px; 
    background-color: black; 
} 

Answer 1

html, body { 
    width: 100%; 
    height: 100%; 
} 

.map-frame { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

.map-content { 
    z-index: 10; 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 390px; 
    background-color: black; 
    color: #FFF; 
} 

http://jsfiddle.net/oswaldoacauan/tx67C/

Answer 2

thêm video này vào css của bạn. làm việc trong chrome ít nhất

position:absolute; 
z-index:9999; 
color:#fff; 

Answer 3

div bạn muốn phong cách nên được bố trí hoàn toàn và đưa ra một z-index tích cực để nó hiển thị trên bản đồ không dưới