title: position: fixed overlapping page
body: <p>Here is the <a href="http://jsfiddle.net/Shmoyojoe/sZaxc/6/" rel="nofollow">fiddle</a>. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (<code>position: relative; position: fixed</code>) but this doesn't let the div stay fixed.</p>
  
  <p>CSS (for the div):</p>
  
  <pre><code>#top {
      width: 100%;
      height: 40px;
      background: #96f226;
      text-align: center;
      font-size: 30px;
      color: #252525;
      position: relative;
      position: fixed;
  }
  </code></pre>
  
  <p>HTML (for the div):</p>
  
  <pre><code>&lt;div id='top'&gt;Kitchen List&lt;/div&gt;
  </code></pre>