Hiding edge of section behind other sections - html

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">([phone]</h2>
info#dolmit.com
<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">
<img src="img/linkedin.svg" class="img-circle" alt="Team" style="width:62px;height:62px;">
<img src="img/fb.svg" class="img-circle" alt="Team" style="width:62px;height:62px;">
</div>
<!--end social-media-->
<div class="copyright small">
<p class="text-center">Dolm IT © 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;
}