在 Google 地图上叠加 DIV

Question

我正在尝试将 div 作为叠加层放置在 Google 地图之上。不过，我似乎无法将其包含在 Google 地图 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>

您还可以在 "Current Projects -> Amenities" 选项卡下查看当前发生的情况。

Answer 1

.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 代码一样。

Answer 2

好的，如果你设法将 #over 和 #map-canvas2 都放在一个单独的包装器中，你可以像这样很容易地完成它：

这个包含这两个 id 的包装器，将其设置为相对定位，这样任何绝对定位的子级都将绑定到这个父级；
覆盖物，#over，将其设置为 position: absolute，如果您希望它拉伸到其父高度，则使用 100% 高度，或使用 top 和 bottom 属性。（不要忘记考虑任何边框、边距等）
应该就可以了。

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

在 Google 地图上叠加 DIV

Overlay DIV on Google Maps

css

google-maps