Responsive Map showing on top of absolute positioned header

HTML & CSS
1

So, this is my first responsive site and I used some css to make the google maps responsive. When you scroll on the site I made it so that the header is always visible and did this with absolute positioning. This is working well, but when you scroll down the google maps show on top of the header. I believe that this is because the maps are using absolute positioning. Is it possible to make it so that the maps don’t show on top of the header when scrolling?? thx

2

Yes, most likely. Does the problem occur in all browsers or just one or some?

Can you post a link to the site, Brian?

3

Oh shoot i forgot to post the link. The problem occurs in all browers. http://dev.newstartlaw.clients.blinkss.com/?page_id=4

4

On your style.css, line 39, add a z-index of 1 and the map will scroll beneath the header. Nice effect, Mr. B. :slight_smile:


#MainHead {
    background-color: rgba(219, 219, 219, 0.95);
    border-bottom: thick solid #333333;
    display: block;
    margin: 0 auto;
    position: fixed;
    width: 100%;
    [color=blue]z-index: 1;[/color]
}
5

Thx. It worked. I can’t believe that I didn’t even consider z-index. I need to build websites more often. I think its full time for me from here on out. #OnceIGetAFewMoreThingsDown

6

Cool. Thanks for the feedback!

:lol: clever

7