title: positioning a div bottom of the page and keep content above
body: <p>I have the following CSS which positions a div at the bottom of the page.</p>
  
  <p><em>Q:</em> How can I stop content flowing underneath it?</p>
  
  <pre class="lang-css prettyprint-override"><code>#footer {
      position:fixed;
      bottom:0;
      background:url(../images/bg-footer.jpg) top;
      z-index:200;
      height:34px;
      width:100%;
      line-height:34px;
      padding:0;
      font-size:11px;
      color:#fff;
  }
  </code></pre>
  
  <p>I can't add padding to the body or anything because I have a fullscreen background image in place as per this tutorial:</p>
  
  <p><a href="http://css-tricks.com/how-to-resizeable-background-image/" rel="nofollow noreferrer">http://css-tricks.com/how-to-resizeable-background-image/</a> </p>