页脚重叠内容 - HTML和CSS

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

          <!-- 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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试从<footer style="margin-top:90px">以上的分区给页脚留出余量，否则减少最后封闭分区的高度