title: CSS Position relative goes over fixed how to fix this?
body: <p>Basically after doing research i found out that the only way fro the text in a text box to start from the bottom and go up without overflowing down is to set position absolute and relative.</p>
  
  <p>But by doing so it goes over my fixed nav bar.</p>
  
  <p>Any way to fix this issue?</p>
  
  <pre><code>#ChatName{
      width: 99%;
      height: 20px;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 5px;
      border: #000000 solid 1px;
  
  }
  #ContentWrapper{
      width: 100%;
      height: 600px;
  }
  #ChatBig {
      float: left;
      width: 45%;
      height: 600px;
      margin-left: 20px;
      overflow: hidden;
      border: #000000 solid 1px;
      resize:none;
      position: relative;
  
  }
  #ChatMessages{
      width: 100%;
      bottom: 55px;
      margin-bottom: 5px;
      resize:none;
      font-size: 16px;
      font-weight: normal;
      overflow:hidden;
      position: absolute;
  
  }
  #ChatText{
      width: 100%;
      height: 50px;
      resize:none;
      overflow:hidden;
      position: absolute;
      bottom: 0;
  
  }
  #ChatText:focus{outline: none;}
  
  #RightContent{
      width: 25%;
      height: 600px;
      float: right;
      margin-right: 10px;
      border: #000000 solid 1px;
      overflow: hidden;
  }
  #Online{
      width: 100%;
      height: 100px;
      overflow: hidden;
      text-align: center;
  
  }
  #IsOnline{
      width: 100%;
      height: 24px;
      border: #000000 solid 1px;
  }
  #IsActive{
      width: 100%;
      height: 24px;
      border: #000000 solid 1px;
  
  }
  body {
      background-color: #edf0f5;
  }
  #Holder {
      width: 100%;
  }
  .UserNameS{
      color: #7CB9E8;
  }
  .UserNameS:hover{text-decoration:underline; cursor: pointer;}
  #nav{
      width:100% !important;
      height: 50px;
      background-color: orange;
      box-shadow: 0 4px 2px -2px gray;
      position:fixed;
      padding:0;
      margin:0;
      overflow: hidden;
  
      top:0;
      left:0;
  }
  #UserNav{
      float: right;
      width: 33%;
      height: 50px;
      text-align: right;
      margin-right: 30px;
      margin-top: 10px;
  }
  #CreteChat{
      width: 33%;
      height: 50px;
      float: right;
      margin-top: 10px;
  
  }
  #Logo{
      float: left;
      width: 30%;
      height:50px;
      margin-left: 10px;
      margin-top: 10px;
  }
  
  #ChatCreate {
      width: 300px;
  
  }
  #Wrapper {
      width: 100%;
      height: 720px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/3fl5B.png" alt="enter image description here"></p>
  
  <p>and i want it to be like this</p>
  
  <p><img src="https://i.stack.imgur.com/Kkmsd.png" alt="enter image description here"></p>
  
  <p>but when its like this look how my text bar disappears and texts goes blow the box border</p>