title: How to push other divs down?
body: <p>I am making my own smart banner, and Everything is working fine including the js code. The idea is that when a user opens the website on their mobile device, a banner drops down from the top asking if he/she wants to download. However,when my smartbanner drops down from the top, it just overlaps the other div below it, instead of pushing it down. here is my css code. The div below is a sticky header, thus its position is fixed.</p>
  
  <pre><code>#smartbanner .smartbanner-button { 
          position:absolute; 
          right:20px; 
          top:24px; 
          border:1px solid #bfbfbf; 
          padding: 0 10px; 
          min-width: 10%; 
          height:24px; 
          font-size:14px; 
          line-height:24px; 
          text-align:center; 
          font-weight:bold; 
          color:white; 
      }
      #smartbanner { 
          position:absolute; 
          left:0;
          border-bottom:1px solid #e8e8e8; 
          width:100%; 
          height:78px;
          top: -80px;
          transition: top 300ms;
          opacity: 0.95;
          background: rgba(250,250,250,1);
          background: -moz-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
          background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,250,250,1)), color-stop(47%, rgba(240,240,240,1)), color-stop(100%, rgba(232,232,232,1)));
          background: -webkit-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
          background: -o-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
          background: -ms-linear-gradient(-45deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
          background: linear-gradient(135deg, rgba(250,250,250,1) 0%, rgba(240,240,240,1) 47%, rgba(232,232,232,1) 100%);
      }
      #smartbanner .smartbanner-close{
          margin-left: 0.1em;
          margin-top: 1.5em;
          font-size: 1em;
          background:none;
          border:none;
      }
      #smartbanner .smartbanner-logo { 
          position:absolute; 
          left:30px; 
          top:10px; 
          display:block; 
          width:57px; 
          height:57px; 
          background:rgba(0,0,0,0.6);
          background-size:cover; 
          border-radius:10px; 
          box-shadow:0 1px 3px rgba(0,0,0,0.3); 
      }
      #smartbanner .smartbanner-info { 
          position:absolute; 
          left:103px; 
          top:10px; 
          width:44%; 
          font-size:11px;
          line-height:0.2em;
          font-weight:bold;
          color:#6a6a6a;
          text-shadow:0 1px 0 rgba(255,255,255,0.8); 
      }
      #smartbanner .smartbanner-price { 
          position:absolute; 
          left:103px; 
          top:30px; 
          width:44%; 
          font-size:11px;
          line-height:0.2em;
          font-weight:bold;
          color:#6a6a6a;
          text-shadow:0 1px 0 rgba(255,255,255,0.8); 
      }
      #smartbanner .smartbanner-info strong {
          display:block; 
          font-size:13px;
          color:#4d4d4d; 
          line-height: 18px; 
      }
      #smartbanner .smartbanner-input {
          background:none;
          border:none;
      }
  </code></pre>