全寬Google地圖和CSS

我在頁面上使用height="100%"和width="100%"在全角谷歌地圖。我想知道一些css div的東西頂部它。我讀到使用負值（例如margin-top: -500px;）可以工作，但他們這樣做，但是當我嘗試爲div的背景分配一種顏色時，它不會在地圖上顯示它，而是在它下面顯示它，我想要什麼。有針對這個的解決方法嗎？代碼：全寬Google地圖和CSS

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

風格：

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

來源

2012-04-20 Joshua Terrill

這上面的DIV是修復[設爲谷歌地圖集裝箱DIV寬度和高度100％]（http://stackoverflow.com/a/18147172/782535） – 2013-08-09 13:10:44

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/

來源

2012-04-20 17:48:51

是的，而負邊界語義正確我也建議使用絕對定位。 – 2015-03-22 08:31:18

添加到您的CSS。在Chrome瀏覽器的至少

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

來源

2012-04-20 17:49:17

要風格應該被絕對定位，並給予了積極的z-index，使其顯示在地圖不低於

來源

2015-09-28 21:41:03 Afzaal

全寬Google地圖和CSS

回答

相關問題