重叠的Div问题

Question

嗨，我正在尝试做一个网络漫画网站。我现在的问题是我有

两个Div是重叠的，我不知道该如何解决这个问题。我的代码的特定重叠部分是content div和版权容器。在我的CSS中，内容离top-nav-bar的顶部有20px。我正在试图弄清楚如何保持这个边距，并使其内容Div不会移动到版权Div上。我已经提供了HTML，我希望是相关的CSS。如果您需要更多信息，请让我知道，我将非常乐意提供它。

​

#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" />
    <!--
			<div class = "logo">
				<img src="images/logo.png"/>
			</div>
			-->
  </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

你把relative拼错了

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

尝试修复它，看看是否会得到不同的结果