Overlapping Div Ausgabe

Question

Hallo Ich versuche, eine Web-Comic-Website zu machen. Mein aktuelles Problem ist, dass ich
zwei Divs habe, die sich überschneiden und ich kann nicht herausfinden, was zu tun ist, um das Problem zu beheben. Die spezifischen überlappenden Teile meines Codes sind der Content-Div- und der Copyright-Container. In meinem CSS habe ich den Inhalt 20px entfernt von der Spitze der Top-Nav-Leiste. Ich versuche herauszufinden, wie ich diesen Rand halten kann und es so machen kann, dass die Content Div sich nicht über die Copyright Div bewegt. Ich habe den HTML-Code zur Verfügung gestellt und hoffe, dass es das relevante CSS ist. Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen, ich werde mehr als glücklich sein, es zur Verfügung zu stellen.

#content { 
 
    width: 1100px; 
 
    height: 1500px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: 10px; 
 
    background-color: #666; 
 
    box-shadow: 0 0 10 px 0px rgba(12, 3, 25, 0.8); 
 
    clear: both; 
 
    display: inline-block; 
 
} 
 

 
.copyright-container { 
 
    margin: 0 auto; 
 
    position: ralative; 
 
    text-align: center; 
 
    padding: 0px; 
 
} 
 

 
#wrapper { 
 
    background-color: #333; 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    background-image: url("images/bg-tileable.png"); 
 
    background-position: left-top; 
 
    background-repeat: repeat; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    /*border: 1px solid rgba(0, 0, 0, 0.3);*/ 
 
    border-sizing: border-box; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #FFF; 
 
}

<div id="wrapper"> 
 

 
    <!--Site Image Banner --> 
 
    <header> 
 
    <img src="images/banner06.png" /> 
 
    <img class="logo" src="images/logo.png" /> 
 
    <!-- 
 
\t \t \t <div class = "logo"> 
 
\t \t \t \t <img src="images/logo.png"/> 
 
\t \t \t </div> 
 
\t \t \t --> 
 
    </header> 
 

 
    <!--Navigation bar below header Graphic --> 
 
    <nav class="top-nav-bar"> 
 
    <ul class="nav-list"> 
 
     <li class='active'><a href="#">Home</a></li> 
 
     <li><a href="#">Comics</a></li> 
 

 
     <li><a href="#">Comissions</a></li> 
 
     <li><a href="#">Tutorials</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <!-- Holds side panel outside links--> 
 
    <div id="outside-links-container"> 
 
    <div class="title"> 
 
     <h3> 
 
     <p class="title-text"> Other Works</p> 
 
     </h3> 
 
    </div> 
 
    <nav class="outside-links"> 
 
     <!--Make Deviantart Logo and add <img> element --> 
 
     <li> 
 
     <a href="#" target="_blank" alt="Link my Deviantart"> <img src="images/da-logo02.png" /></a> 
 
     </li> 
 
     <!--Make Instagram Logo and add <img> element --> 
 
     <li> 
 
     <a href="#" target="_blank" alt="Link my Instagram"><img src="images/ig-logo.png" /></a> 
 
     <li> 
 
    </nav> 
 
    </div> 
 

 
    <!--Holds Comic Page and comic page Navigation --> 
 
    <div id="content"> 
 
    <div class="title"> 
 
     <h1> 
 
     <p class="title-text"> Omnibreed Page 01</p> 
 
     </h1> 
 
    </div> 
 
    <div class="recent-post"> 
 
     <img class="comic-page" src="images/comic-pages/Chap01_Page 1_Low.png" /> 
 
    </div> 
 

 
    <div class=" comic-navigation"> 
 
     <ul class="comic-nav-list"> 
 
     <li> 
 
      <a href="#"><img src="images/arrow01.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow02.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/archieve01.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow03.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow04.png" /></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="copyright-container"> 
 
    <p class="copyright"> &#169;Copyright 2017 Charles </p> 
 
    <div>

Answer 1

Sie falsch geschrieben relativ

.copyright-container { 
    margin: 0 auto; 
    position: ralative; 
    text-align: center; 
    padding: 0px; 
} 

Versuchen zur Festsetzung es, und sehen, ob Sie unterschiedliche Ergebnisse erhalten