我有一个包含多个 div 和部分的页面，我希望顶部导航 div 固定并位于所有内容之上，然后页面中的所有 div/部分在其下方滚动，然后最后一个 div 是我的谷歌地图固定在页面底部但在所有内容下方，因此当您滚动到底部时， map 会显示出来而不是滚动到 View 中。
问题:下面的代码在正确的位置(底部)绘制了谷歌地图，但在所有内容之上。
如果我将 mapcontainer 的 z-index 设置为 -1 那么各种疯狂的事情就会发生(hobbiescontainer 的 bg 图像消失，topnav 不再固定，如果我向下滚动并返回它完全消失)
如果我删除 google maps API，那么一切都会按预期进行。
因此，根据以上内容，我猜测这个问题与以下事实有关:一旦渲染完所有内容并丢弃我的 z-index， map 就会被放入 div，但我不太确定。谁能帮忙？
抱歉，代码量太大 - 因为它涉及到定位，我认为可能是我的其他一些元素导致了问题，所以最好将它们全部放入。
已将代码加载到 jsfiddle:http://jsfiddle.net/isherwood/rwg4wqfo/4/
<body>
<nav id="topbar">
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#wexp">Work Experience</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div id="navspace"></div>
<section id="introductionSection">
<a id="intro"><span id="imageCropper"><img src="/images/me.jpg" / id="imageOfMe" /></span></a>
<h1>Who am I?</h1>
<p class="keyText">
<!-- content here -->
</p>
</section>
<section id="skillsSection">
<a id="skills"><h2>My Skills/Knowledge</h2></a>
<p class="keyText">
<!-- content here -->
</p>
</section>
<section id="workExperienceSection">
<a id="wexp"><h3>Work Experience</h3></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
<div id="hobbiescontainer">
<section id="hobbiesSection">
<a id="hobbies"><h4>Hobbies</h4></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
</div>
<section id="contactSection">
<a id="contact"><h5>Contact</h5></a>
<p class="keytext">
<!-- content here -->
</p>
</section>
<div id="mapcontainer">
<div id="map"></div>
</div>
<div id="mapspace"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBa5Gt2bp2Oxnc_1NqN1wxGKJjuHqJ9y_4"></script>
<script src="CHJS.js"></script>
</body>
这是 CSS:
body
{
padding:0px;
margin:0px;
text-align:justify;
height: 100%;
min-height:800px;
background-color:rgba(125,185,232,1);
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,87,153,1)), to(rgba(255,255,255,1)));
background-image: -webkit-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -moz-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -ms-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
background-image: -o-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
z-index:1;
}
ul, li
{
list-style-type:none;
display:inline;
}
p {
padding: 0px 25% 0px 25%;
}
h1, h2, h3, h4, h5 {
font-size: 30px;
font-family: Calibri,Verdana,arial,serif;
font-weight: bold;
text-transform:uppercase;
width:50%;
position: relative;
left: 15%;
}
button {
float:right;
margin: 30px 100px 0px 0px;
font-family:calibri,verdana,arial,serif;
font-size:16px;
font-weight:normal;
text-transform:uppercase;
}
#navspace {
height: 50px;
width: 100%;
}
#topbar {
position:fixed;
top:0;
left:0;
background-color: rgba(232,232,232,1);
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(242,242,242,1)), to(rgba(232,232,232,1)));
background-image: -webkit-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -moz-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -ms-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
background-image: -o-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
height: 50px;
width: 100%;
text-align: center;
border: 1px solid rgba(195,195,195,1);
z-index: 9999;
}
#introductionSection {
background-color: white;
padding: 20px 0 0 0;
overflow:auto;
}
#imageCropper
{
height:100px;
width:100px;
vertical-align:middle;
border-radius: 50% 50% 50% 50%;
overflow:hidden;
display:inline-block;
margin:3px;
border: 1px solid rgba(195,195,195,1);
position: relative;
left: 100px;
}
#imageOfMe
{
position:relative;
left:-53%;
top:-65%;
height:180px;
}
#skillsSection {
background-color: grey;
padding: 0px;
overflow:auto;
margin: 0px;
z-index:1;
}
#workExperienceSection {
background-color: white;
padding: 0px;
overflow:auto;
}
#hobbiescontainer {
background-image: url(Images/hockey.jpg);
background-position:center;
background-size:cover;
background-attachment: fixed;
padding: 10% 0 10% 0;
}
#hobbiesSection {
background-color: grey;
padding: 0px;
overflow:auto;
}
#contactSection {
background-color:white;
padding: 0px;
overflow:auto;
}
#mapcontainer {
position:fixed;
top:0px;
left:0px;
width: 100%;
min-height:100%;
padding:0;
border:0;
z-index:0;
}
#map {
position:absolute;
bottom:0px;
width: 100%;
height: 400px;
}
#mapspace {
height: 400px;
position:relative;
}
最佳答案
#topbar, #navspace, #hobbiescontainer, section {
position: relative;
z-index: 1;
background-color: pink;
}
http://jsfiddle.net/isherwood/rwg4wqfo/5
请注意，您的方法删除了出于滚动、点击等目的对 map 的访问权限。
关于javascript - 我的谷歌地图 DIV 位于其他所有内容之上 - 不明白为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25332674/