title: How do I prevent my buttons from overlapping other elements?
body: <p>here is a simplified version of my webpage. I am experiencing an issue where my buttons ( tags) are overlapping my main h1 element. How can I fix this, so they do not overlap? I believe that the issue is being caused because I have set the position of the div #MOVE to fixed. However, I need this due to my animated navigation bar. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href="main.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="jquery-1.10.2.min.js"&gt;
      &lt;/script&gt;
      &lt;script src="main.js"&gt;
      &lt;/script&gt;
      &lt;title&gt;A'S COFFEE&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="MOVE"&gt;
              &lt;h1 class="logoone"&gt;COFFEE.&lt;/h1&gt;
              &lt;h1 class="logotwo"&gt;BETTER WITH A'S&lt;/h1&gt;
      &lt;/div&gt;
              &lt;div class="centeralign"&gt;
                  &lt;a class="button" href="place.html" id="btn1"&gt;Want to Place&lt;br&gt;
                  an Order?&lt;/a&gt;&lt;br&gt;
                  &lt;a class="button" href="#" id="btn2"&gt;View Orders?&lt;/a&gt;
           &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>h1{
    color: #e5b78e;
    font-family: Arial;
    font-size: 100pt;
    padding: 0px;
    margin: 0px;
  display: block;
  }
  
  .logoone{
    margin-left: 50px;
    padding-top: 40px;
    letter-spacing: 15px;
  }
  
  .logotwo{
    margin-left: 50px;
    margin-bottom: 70px;
    letter-spacing: 15px;
  }
  
  body{
    background: url("../img/image3.jpg") no-repeat center center fixed;
    background-size: cover;
  
  }
  
  .button{
    text-decoration: none;
    padding: 30px;
    background-color: white;
    opacity: 0.5;
    font-family: arial;
    font-size: 25pt;
    text-transform: uppercase;
    font-weight: bolder;
    color: #202530;
    border-radius: 1px;
    transition: opacity .2s ease-out;
    margin-top: 10px;
    letter-spacing: 4px;
  }
  
  .button a{
    color: rgba(0,0,0,0.5);
  
  }
  
  #btn1{
  
    margin-top:30px;
    display: inline-block;
    padding-left: 30px;
    padding-right:30px;
  
  }
  
  #btn2{
    margin-top:30px;
    display: inline-block;
    padding-left: 47px;
    padding-right: 47px;
  }
  
  .button:hover{
    opacity: 1;
    transition: opacity .2s ease-in;
  }
  
  .centeralign{
    text-align: center;
  }
  
  br{
    padding: 40px;
  }
  
  /* NAV */
  
  #MenuIcon{
      height: 25px;
      width: 50px;
      position: fixed;
      top:50;
      right: 50;
  }
  #MenuIcon:hover{
      cursor: pointer;
  }
  #MenuLine{
      height: 4px;
      width: 50px;
      background-color: #e5b78e;
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      transition: all .3s;
  }
  #MenuIcon:hover #MenuLine{
      width: 40px;
  }
  #MenuLine::before{
      content: '';
      height: 4px;
      width: 40px;
      background-color: #e5b78e;
      position: absolute;
      margin-top: 10px;
      transition: all .3s;
  }
  #MenuIcon:hover #MenuLine::before{
      width: 50px;
  }
  #MenuLine::after{
      content: '';
      height: 4px;
      width: 40px;
      background-color: #e5b78e;
      position: absolute;
      margin-top: -10px;
      transition: all .3s;
  }
  #MenuIcon:hover #MenuLine::after{
      width: 50px;
  }
  #MainMenu{
      height: 100vh;
      width: 300px;
      background-color: #181818;
      -webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
      position: fixed;
      top:0;
      left: -300px;
      transition: all .5s ease-in-out;
  }
  ul{
      list-style: none;
      padding: 0px;
      margin: 0px;
      font-family: arial;
      font-weight: bold;
      color:white;
      text-align: center;
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
  ul li{
      margin: 20px;
  }
  ul li:hover{
      cursor: pointer;
  }
  .line{
      height: 2px;
      width: 150px;
      background-color: white;
      margin-top: 10px;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      transition: all .3s;
  }
  ul li:hover .line{
      width: 180px;
  }
  #logo{
      position: absolute;
      top:100;
      left: 50%;
      transform: translate(-50%);
  }
  #close{
      position: absolute;
      bottom: 150;
      left: 50%;
      transform: translate(-50%);
  }
  #close:hover{
      cursor: pointer;
  }
  
  .LOGO{
    font-size: 4.5em;
  }
  
  #MOVE{
    position:fixed;
    top:0%;
    left: 0px;
    transition: all .5s ease-in-out;
    width:85%;
    height: 100%;
  }
  </code></pre>