Full-Width Google Map And CSS

Question

I have a full-width google map on a page using `height="100%"` and `width="100%"`. I want to know put some css div stuff on top of it. I read that using negative values such as `margin-top: -500px;` will work, and they do, however when I try to assign a color to the background of the div, it doesn't display it over the map, it displays it under it, which isn't what I want at all. Is there a solution to this? Code: ```

I want this text to be in a div box that has a black background.

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

Accepted Answer

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

Full-Width Google Map And CSS

Solution

Problem

Related problems