页脚重叠内容 - HTML 和 CSS

Posted 2023-03-21

【中文标题】页脚重叠内容 - HTML 和 CSS

【英文标题】：Footer overlapping content - HTML and CSS

【发布时间】：2017-11-28 16:00:13

【问题描述】：

我的 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>

【问题讨论】：

你确定你给了我们所有的相关代码吗？我没有看到任何重叠。

【参考方案1】：

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