Полноразмерная карта Google и CSS

У меня есть полноразмерная карта Google на странице с использованием 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;
}