将部分边缘隐藏在其他部分后面

Question

我是 HTML & CSS 的新手，所以我无法解决我面临的开发问题。我的页脚设计如下所示：

地图部分应该稍微隐藏在上面和后面的部分后面。我正在使用 bootstrap，现在我只实现了这个：

我知道这应该通过相对和绝对定位来解决。我给了页脚 id position: 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。感谢您的帮助。

Answer 1

在您的 CSS 中将其用于 #map

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

将部分边缘隐藏在其他部分后面

Hiding edge of section behind other sections

html

css

position

twitter-bootstrap