पूर्ण-चौड़ाई Google मानचित्र और सीएसएस

Question

मेरे पास height="100%" और width="100%" का उपयोग कर एक पृष्ठ पर एक पूर्ण चौड़ाई वाला Google मानचित्र है। मैं कुछ css div stuff को शीर्ष पर जानना चाहता हूं। मैंने पढ़ा है कि margin-top: -500px; जैसे नकारात्मक मानों का उपयोग करना काम करेगा, और वे करते हैं, हालांकि जब मैं div की पृष्ठभूमि में रंग निर्दिष्ट करने का प्रयास करता हूं, तो यह इसे मानचित्र पर प्रदर्शित नहीं करता है, यह इसे इसके अंतर्गत प्रदर्शित करता है, जो ' मैं क्या चाहता हूँ। क्या इसका कोई उपाय है? कोड:

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

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

अपने सीएसएस में जोड़ना। क्रोम में काम करता है कम से कम

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

Answer 3

div आप पूरी तरह तैनात है और एक सकारात्मक z- सूचकांक दी जानी चाहिए शैली करना चाहते हैं, ताकि वह नीचे नहीं