Question

我试图在屏幕上修复谷歌地图div，而我的背景（由连续的内容组成的div组成）可以滚动。

我尝试将地图div包装在另一个固定的div中，但这只会使地图div消失。

HTML

<body>

    <div id="map" style="position: fixed;"></div>

    <div class="backdiv1">
        <div class="content">
            <h1>TITLE</h1>
        </div>
        <div class="background">
            <p>CONTENT</p>
        </div>
    </div>

    <div class="backdiv2">
        <div class="content">
            <h1>TITLE</h1>
        </div>
        <div class="background">
            <p>CONTENT</p>
        </div>
    </div>

    <div class="backdiv3"> <!--et cetera-->
</body>

CSS

html, body, #map    {
    font-family: Nobel;
    font-size: small;
    background: gray;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#map  {
    width: 100%;
    height: 65.85%;
    position: fixed;
    display: block;
    z-index: 10
}

.backdiv1   {
    top:0%;
    left: 0%;
    position: absolute;
    width:100%;
    height: 100%;
    background-color: black;
    z-index: 1;
}

.backdiv2   {
    top: 100%;
    left: 0%;
    position: absolute;
    width:100%;
    height: 100%;
    background-color: blue;
    z-index: 1;
}

.backdiv3    { 
    top: 200%
    left: 0%
    /*et cetera*/

任何帮助都将不胜感激。

Answer 1

你是对的。 map API会将position设置为地图元素上的relative。

您应该将地图包装在另一个元素中（，当您尝试时），但是为它提供您尝试提供给#map的属性（并应用于{{1只是宽度/高度属性）

#map

您还应该将第一个div（.map-position { width: 100%; height: 65.85%; position: fixed; display: block; z-index: 10; }）的top设置为.backdiv1，以便它在地图之后开始（这样您可以完全看到它）

http://codepen.io/anon/pen/vOMgEV

演示

在背景<div>滚动时保持谷歌地图<div>固定

1 个答案: