全宽谷歌地图和CSS

Question

我在页面上使用height="100%"和有一个全宽谷歌地图width="100%".我想知道把一些css div的东西放在它上面.我读到使用负值,如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/