CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3
Bruford
Bruford

Reputation: 521

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

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.

Problem: The code below draws the google map in the right place (bottom) but ontop of everything.

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)

If I remove the google maps API then everything works as expected.

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. 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/

     <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:

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;
}

Upvotes: 0

Views: 504

Answers (1)

isherwood
isherwood

Reputation: 61053

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

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

Note that your approach removes access to the map for purposes of scrolling, clicking, etc.

Upvotes: 1

Related Questions