页脚重叠内容 - HTML 和 CSS

Question

我的 html 代码中的页脚与之前的内容重叠，这就是它在浏览器中的样子：

它位于 div 中的图像顶部，就在页脚语义标签之前。

    footer {
      position: relative;
    }
    
    #footerlinks {
      text-align: center;
    }
    
    #footerlinks li {
      list-style: none;
      display: inline-block;
    }
    
    #footerlinks a {
      text-decoration: none;
      color: #8e8e8e;
      font-family: 'Lato', sans-serif;
    }

          <!-- Reviews -->
      <section id="reviews">
        <h2>Reviews</h2>
        <section class="visitor-review-1">
          <h3>Placeholder text</h3>
        </section>
        <section class="visitor-review-2">
          <h3>Placeholder text<h3>
        </section>
      </section>

    </main>

    <!-- Footer -->
    <footer>
      <nav id="footerlinks">
        <ul>
          <li><a href="copyright.html">Copyright &#124;</a></li>
          <li><a href="accessibility.html"> Accessibility &#124;</a></li>
          <li><a href="subscribe.html"> Subscribe</a></li>
        </ul>
      </nav>
    </footer>

Answer 1

试着给上面的页脚留出一个边距，比如<footer style="margin-top:90px">，否则减少最后一个封闭分区的高度