页脚重叠内容 - 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"> 否则减少最后一个封闭部分的高度

页脚重叠内容 - HTML 和 CSS

Footer overlapping content - HTML and CSS

html

css

layout

css-position

footer