Hiding edge of section behind other sections

Question

I'm fairly new to HTML & CSS, so I can't solve the development problem I'm facing. I have a footer design that looks like this:

The map section should slightly hide behind the above and beyond section. I'm using bootstrap and right now I achieved only this:

I know that this should be solved with relative and absolute positioning. I gave the footer id position: relative and added the absolute position to the map section, but the map section disappeared alltogether. I obviously don't know what I'm doing, so I'm hoping you can help me.

My HTML for the footer looks like this:

<section id="footer">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <h2 class="text-center"> Join Our Team</h2>
                  <div class="teamview">
                     <img src="img/team1.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team2.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team3.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team4.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team5.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/teamu.png" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team7.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                     <img src="img/team8.jpg" class="img-circle" alt="Team" style="width:62px;height:62px;">
                  </div>
                  <!--end teamview-->
                  <button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<span class="notify">2</span></button>
                  <div class="contact-us">
                     <p class="text-center">Get in touch with Dolm IT, we’d love to help and work with you.</p>
                     <h2 class="text-center">(+372) 56 247 399</h2>
                     <a href="mailto:[email protected]" class="text-center">[email protected]</a>
                     <p class="text-center">Dolm IT office: Parda 12, 10151, Tallinn, Estonia</p>
                     <p class="text-center">Official address: Pärnu mnt 122-20, 11313, Tallinn, Estonia</p>
                  </div>
                  <!--end contact us-->
               </div>
               <!--end col-md-12-->
            </div>
            <!--end row -->
         </div>
         <!--end container-->
      </section>
      <!--end footer-->
      <div id="map"></div>
      <section id="footer-bottom">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <div class="social-media">
                     <a href="#"><img src="img/linkedin.svg" class="img-circle" alt="Team" style="width:62px;height:62px;"></a>
                     <a href="#"><img src="img/fb.svg" class="img-circle" alt="Team" style="width:62px;height:62px;"></a>
                  </div>
                  <!--end social-media-->
                  <div class="copyright small">
                     <p class="text-center">Dolm IT &copy; 2016</p>
                  </div>
               </div>
               <!--end col-md-12-->
            </div>
            <!--end row -->
         </div>
         <!--end container-->
      </section>
      <!--end footer bottom-->

And the CSS:

/*footer*/

#footer {
    background: url("../img/footerbg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
    padding: 100px 0 150px 0;
}
#footer h2 {
    color: #ffffff;
}
.teamview {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.teamview img {
    border: 3px solid #1dcb8b;
    margin-right: 45px;
}
.btn-link.green {
    position: relative;
}
.contact-us {
    margin-top: 60px;
}
.contact-us h2 {
    font-size: 4rem;
    color: #ffffff;
}
.contact-us p {
    color: #ffffff;
}
.contact-us a {
    display: block;
    font-size: 4rem;
    color: #1dcb8b;
}
.contact-us a:hover {
    text-decoration: none;
}
.contact-us a:after {
    display: block;
    margin: 40px auto 30px;
    width: 100px;
    height: 3px;
    content: '';
    background: #1dcb8b;
}
#map {
    width: 100%;
    height: 400px;
}
.social-media {
    display: flex;
    justify-content: center;
    margin: 40px 0 25px 0;
}
.social-media a {
    margin: 0 15px;
}
.copyright p {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.1rem;
}
#footer-bottom {
    background: url("../img/social_media_bg.png") no-repeat left top;
    width: 100%;
    background-size: cover;
    padding: 90px 0 50px 0;
}

Is there an easy solution to this? Here's a demo page as well. Thank you for your help.

Answer 1

In your CSS use this for #map

#map {
        width: 100%;
        height: 400px;
        margin-bottom: -110px;
        margin-top: -130px;
        z-index: -1;
    }