Question

我在使用Google Map API块顶部显示div时遇到问题。

据我所知，我把它放在绝对的z-index上，应该把它放在最上面，但是我没有看到它。我希望在地图上显示.topblock1 div。

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

Answer 1

我有类似的代码，请先尝试关闭map-canvas div：

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

Answer 2

在地图画布周围制作一个包装器，google的代码会隐藏所有非本机元素。

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

并设置此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>

谷歌地图API - 顶部浮动div

2 个答案: