Footer überlappende Inhalt - HTML und CSS

Question

Die Fußzeile in meinem HTML-Code sind vorherigen Inhalt überlappen, so wird es wie im Browser aussieht:

Es ist innerhalb des div auf der Oberseite eines Bildes sitzt kurz vor den Fußnoten semantische Tags.

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

Versuchen Sie einfach einen Spielraum zu geben, von oben Teilung wie <footer style="margin-top:90px"> sonst reduzieren die Höhe des zuletzt geschlossenen Abteilung Zur Fußzeile