CODEWITHSUNDEEP
cssgoogle-mapshtmlshadow
cesarvargas
cesarvargas

Reputation: 182

Float a div over Google Maps

I`m doing this website, and I need to put some shadows over google Maps <div> to achieve a shadow effect:

However, it`s not working.

This is how my css looks like right now:

html { 
height: 100% 
}

body { 
height: 100%; 
margin: 0; 
padding: 0 
}

#map_canvas { 
    height: auto;
    z-index: 1;
}

#topBar {
background-image:url(img/top.jpg);
background-repeat:repeat-x;
height: 100px;
min-height:100px;
-moz-box-shadow: 0px 5px 5px #888;
-webkit-box-shadow: 0px 5px 5px #888;
box-shadow: 0px 5px 5px #888;
z-index:900;
}

As you can see, I`m using an image to create the shadow. But my problem is: the map is not even loading. If I put a fixed height instead of auto, it loads. But I fail at giving that shadowy vision. What happens is that the map is loaded ON TOP of the div with the shadow.

I already tried this solution already, with no success:

How to float a div over Google Maps?

Thanks in advance!

Upvotes: 1

Views: 3919

Answers (1)

erik
erik

Reputation: 180

I think it will be fixed if you just add a position to the elements. Z-index needs a position to work..

So put "position:relative;" on both elements and you will be fine.

Upvotes: 2

Related Questions