Question

我正在尝试将div作为叠加层放置在Google地图上。我似乎无法将其保存在Google Maps div中。

#wrapperMap {
   position: relative;

}

#over {

background: #000000;
position: absolute; 
top: 120px; 
left: 10px; 
z-index: 99;
width: 20%;
height: 380px;
opacity: 0.9;
filter: alpha(opacity=90);
color: #FFFFFF;
}


<div id="wrapperMap">

                <div id="map-canvas2" style="width: 100%; height: 400px; border: 16px solid #e2e1e0;"></div>
                </div>


                <div id="over">

                        <br />

                        <div align="center">
                        <ul class="no_bullet">
                            <li class="school">SCHOOLS</li>
                            <li class="res">RESTAURANTS</li>
                            <li class="rec">RECREATION</li>
                            <li class="shop">SHOPPING</li>
                        </ul>
                        </div>

                </div>

            </div>

您还可以在“当前项目 - ＆gt;设施”标签下查看此处发生的情况。

Answer 1

好的，如果你设法将#over和#map-canvas2放在一个单独的包装器中，你可以很容易地把它拉下来：

这个包含这两个ID的包装器，将它设置为相对定位，以便任何绝对定位的子节点将绑定到此父节点;
覆盖物，#over，将其设置为position: absolute，如果您希望它伸展到其父高度，则使用100％高度，或使用顶部和底部道具。（不要忘记考虑任何边界，边距等。）
应该这样做。

查看 example here ，希望这会对您有帮助。

Answer 2

.wrapper {
width: 100%;
height: 100%;
position: relative;
}

#over {
background: #000000;
position: absolute;
z-index: 0;
width: 20%;
height: 370px;
opacity: 0.9;
filter: alpha(opacity=90);
color: #FFFFFF;
float: left;
top: 15px;
margin-left: 16px;
}

经过一些检查元素。我想这是我看到的可能的解决方案。试试上面的代码。把#wrapper放在上面。就像之前的原始html代码一样。

在Google地图上叠加DIV

2 个答案: