我的谷歌地图DIV位于其他所有内容的顶部-我不明白为什么

My google map DIV sits on top of everything else - can't see why

本文关键字：顶部 为什么 明白 DIV 谷歌地图 于其他 其他 我的      更新时间：2023-09-26

我有一个有多个div和section的页面，我希望顶部导航div是固定的，在所有东西的顶部，然后所有的div/section在页面下滚动，然后最后一个div是我的谷歌地图，它固定在页面的底部，但在所有东西下面，所以当你滚动到底部，地图是揭开的，而不是滚动到视图

问题:下面的代码将谷歌地图绘制在正确的位置(底部)，但在所有内容的顶部。

如果我将mapcontainer的z-index设置为-1，那么各种疯狂的事情就会发生(hobbiescontainer的bg图像消失了，topnav不再固定，如果我向下滚动并向上滚动它就会完全消失)

如果我删除谷歌地图API，然后一切工作如预期。

因此，基于上述我猜测，这个问题是有关的事实，地图被放入div一旦一切都被渲染和抛出我的z索引，但我不是很确定。有人能帮忙吗?

为大量的代码道歉-因为它涉及到定位，我想可能是我的一些其他元素引起了问题，所以最好把它们都放进去。

已加载代码到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

请注意，您的方法删除了用于滚动、单击等目的的对地图的访问。

相关文章：