CODEWITHSUNDEEP
cssgoogle-maps
user1110562
user1110562

Reputation: 421

Google Map API - float div on top

I am having issues getting a div to display on top of a Google Map API block.

As far as I can see I have it positioned absolute with a z-index which should place it on top, but I don't see it. It is the .topblock1 div I am looking to appear over the map.

<div class="block4">


                <div id="map-canvas"> 
                        <div class="topblock1">
                        <h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
                        <a href="#PROJECTS">SEE OUR CURRENT PROJECTS >></a>
                        <div class="clear"></div>
                        </div>
                </div>

            </div>

Upvotes: 0

Views: 566

Answers (2)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Make a wrapper around the map canvas, the code of google hide all elemets that are not native.

         <div class="wrapper">
            <div class="topblock1">
            <h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
             <a href="#PROJECTS">SEE OUR CURRENT PROJECTS >></a>
            <div class="clear"></div>
              </div>
            </div>
         <div id="map-canvas">            
         </div>
         </div>

And set this css

         <style>
            .wrapper{ display:block; position:relative; top:0px; left:0px; right: 0px;}
            .topblock1{ display:block; position:absolute; top:0px; left:0px; right: 0px; z-index:99999} /* Must be above map-canvas */
         </style>

Upvotes: 0

Slyvain
Slyvain

Reputation: 1732

I have a similar code, try closing your map-canvas div first:

<div class="block4">
    <div id="map-canvas"></div>
    <div class="topblock1">
        <h2>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur dipiscing elit. Morbi risus sapien.</p>
        <a href="#PROJECTS">SEE OUR CURRENT PROJECTS >></a>
        <div class="clear"></div>
    </div>
</div>

Upvotes: 1

Related Questions