个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 13:02:54 24 4
gpt4 key购买 nike

我有一个包含多个 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/

24 4 0
文章推荐： c++ - 当 CRT 动态链接时，重载的全局运算符 new(和变体)如何工作
文章推荐： linux - 源中的上下文切换
文章推荐： ruby-on-rails - 如何在 linux apache 托管服务器(即主机、bluehost)中使用 https 配置 redmine
文章推荐： ios - Ipad 与台式机
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com