如何在谷歌地图上浮动一个 div 并保持全屏显示？

Question

我想在 Google 地图上放置一个 div，即使地图是全屏的。

当不是全屏时，我已经可以将 div 放在地图前面，但我需要的是在两种情况下都显示 div。

我需要在谷歌地图上全屏显示的 div 是：.cont-items-monitor

这是我的html代码：

<div class="gx-card-body">
    <div class="cont-items-monitor overlay" style="display: none">
        <ul>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
            <li>Seat León JMG-8823</li>
            <li>Seat Ibiza JMG-8823</li>
            <li>VW Vento JMG-8823</li>
            <li>Nissan Versa JMG-8823</li>
            <li>Nissan March JMG-8823</li>
            <li>Lincoln Navigator JMG-8823</li>
        </ul>
    </div>

    <div id="google-map"></div>
</div>

我的css代码：

.cont-items-monitor {
position: absolute;
top: 60px;
left: 0;
bottom: 30px;
z-index: 1;
background-color: white;
overflow-x: scroll;
padding: 10px 15px 10px 0;
}

Answer 1

我终于可以解决它了。 我要做的就是把我想要叠加的 div 放在初始化 Google 地图时生成的第一个 div 上。

我的html代码是一样的，我唯一做的就是在网站的所有元素都加载后用jquery移动它。

我的html代码超级解释和验证： （假设下面的代码在一个html页面的基本结构中）

<div class="gx-card-body">
                                    <!-- <div class="cont-fab">
                                        <a href="javascript:void(0)" class="gx-fab-btn gx-btn-primary">
                                            <i class="zmdi zmdi-account-add zmdi-hc-fw zmdi-hc-lg"></i>
                                        </a>
                                    </div> -->
                                    <div class="cont-items-monitor overlay" style="display: none">
                                        <ul>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                        </ul>
                                    </div>

                                    <div id="google-map"></div>
                                </div>

我的 JS 代码（jQuery）：

$(document).ready(function () {
    $('.cont-items-monitor').appendTo($('#google-map').find('div')[0]);
});

我希望它为别人服务