Question

我有一个包含多个div和section的页面，我想要修复顶部导航div并在所有内容之上，然后页面中的所有div / section在其下滚动，然后最终div是我的google map固定在页面底部但在所有内容下，因此当您滚动到底部时，地图会被公开，而不是滚动到视图中。

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

如果我将z-index设置为mapcontainer的-1，则会发生各种疯狂事件（hobbiescontainer的bg图像消失，topnav不再固定，如果我向下滚动并备份则完全消失）

如果我删除google maps API，那么一切都会按预期工作。

因此，基于上述情况，我猜测这个问题与以下事实有关：一旦所有内容都被渲染并丢弃了我的z-index，地图就被放入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;
}

Answer 1

#topbar, #navspace, #hobbiescontainer, section {
    position: relative;
    z-index: 1;
    background-color: pink;
}

http://jsfiddle.net/isherwood/rwg4wqfo/5

请注意，您的方法会删除对地图的访问权限，以便滚动，点击等。

我的谷歌地图DIV位于其他一切之上 - 无法理解为什么

1 个答案: