堆栈内存溢出
  简体   繁体   English

我的Google地图DIV位于其他所有内容之上-无法理解原因

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

 原文  2014-08-15 19:08:43  4   1    javascript/ html5/ css3/ google-maps-api-3

问题描述

I have a page with multiple divs and sections, I want the top nav div to be fixed and on top of everything, then all the divs/sections in the page scroll under it, then the final div is my google map which is fixed at the bottom of the page but under everything, so that as you scroll to the bottom the map is unveiled rather than scrolls into view. 我有一个包含多个div和部分的页面，我想固定顶部导航div并放在所有内容的顶部，然后页面中的所有div /部分在其下方滚动，然后最后一个div是我的Google地图，固定在页面底部，但位于所有内容的下方，因此当您滚动到底部时，地图就会显示出来，而不是滚动到视图中。

Problem: The code below draws the google map in the right place (bottom) but ontop of everything. 问题：下面的代码将google地图绘制在正确的位置（底部），但位于所有内容的顶部。

If I set the z-index to -1 of mapcontainer then all sorts of crazy happens (the bg image of hobbiescontainer disappears, topnav is no longer fixed and if I scroll down and back up it disappears entirely) 如果我将mapcontainer的z-index设置为-1，则会发生各种疯狂的情况（hobbiescontainer的bg图像消失，topnav不再固定，并且如果我向下滚动并向上备份，它将完全消失）

If I remove the google maps API then everything works as expected. 如果我删除了Google Maps API，那么一切都会按预期进行。

Therefore based on the above I am guessing that the issue is related to the fact that the map is being put into the div once everything has been rendered and throwing off my z-index, but I'm not really sure. 因此，基于以上内容，我认为问题与以下事实有关：将所有内容渲染完毕并放弃我的z-index后，会将地图放到div中，但是我不确定。 Can anyone help? 有人可以帮忙吗？

Apologies for amount of code - as it involves positioning I thought maybe some of my other elements are causing issues so best put it all in. 对大量代码表示歉意-由于涉及定位，我认为我的其他一些元素可能会引起问题，因此最好将其全部放入。

have loaded code to jsfiddle: http://jsfiddle.net/isherwood/rwg4wqfo/4/ 已将代码加载到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>

and here's the CSS: 这是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;
}

1 个解决方案

解决方案1
 1 已采纳  2014-08-15 21:14:00

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

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

Note that your approach removes access to the map for purposes of scrolling, clicking, etc. 请注意，您的方法会出于滚动，单击等目的而删除对地图的访问。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我看不到正确的Google JavaScript地图？ - Why can't i see right google javascript map? 外部javascript文件无法在所有内容之上添加div - External javascript file can't add div on top of everything div上的google map - google map on top of div 在Google Maps地图上看不到标记 - Can't see markers on a Google Maps map 解析geojson文件后，为什么在浏览器中看不到地图？ - Why can't I see the map in my browser after parsing the geojson file? 我的div无法到达页面的顶部和侧面 - Can't get my div to reach the top and sides of my page 在我的 HTML 代码中看不到 div 中的元素？ - Can't see elements inside div in my HTML code? 无法用画布显示我的谷歌地图 - Can't display my google map with canvas 为什么在页面上加载Google Map会调整使用Roboto字体的页面上所有内容的大小？ - Why does loading a Google Map on my page resize everything on the page that uses the Roboto font? 为什么我在视图中看不到我的 GrandTotal？ - Why Can't I See My GrandTotal In My View?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM