隐藏其他部分后面的部分边缘

Question

我对HTML＆amp; CSS，所以我无法解决我面临的开发问题。我的页脚设计看起来像这样：

地图部分应略微隐藏在上方和后方部分之后。我正在使用bootstrap，现在我只实现了这个：

我知道这应该通过相对和绝对定位来解决。我给了页脚ID位置：relative并将绝对位置添加到地图部分，但地图部分全部消失了。我显然不知道自己在做什么，所以我希望你能帮助我。

我的页脚HTML看起来像这样：

<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:info@dolmit.com" class="text-center">info@dolmit.com</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-->

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

有一个简单的解决方案吗？这是一个演示page as well。谢谢你的帮助。