I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal.
My attempt to wrap the map div in another fixed div resulted in the map disappearing altogether.
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"> <!--and so forth-->
</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%
/*and so on*/
If anyone has any solutions or suggestions, please feel free to share.