Скрытие края раздела за другими разделами

Question

Я довольно новичок в HTML & CSS, поэтому я не могу решить проблему разработки, с которой я сталкиваюсь. У меня есть дизайн колонтитула, который выглядит следующим образом:

Секция карта должна немного прикрыться выше и вне секции. Я использую самозагрузки и сейчас я достиг только это:

Я знаю, что это должно быть решена с помощью относительного и абсолютного позиционирования. Я дал позицию нижнего колонтитула: относительный и добавил абсолютную позицию в раздел карты, но раздел карты исчез полностью. Я, очевидно, не знаю, что делаю, поэтому я надеюсь, что ты сможешь мне помочь.

Мой 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--> 

И КСС:

/*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. Спасибо за помощь.

Answer 1

В вашем использовании CSS для этого #Map

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