position: fixed overlapping page

Question

Here is the fiddle. 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 (position: relative; position: fixed) but this doesn't let the div stay fixed.

CSS (for the div):

#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: relative;
    position: fixed;
}

HTML (for the div):

<div id='top'>Kitchen List</div>

Answer 1

Wrap your content with div and give it the margin-top to the same height as your fixed content.

SEE DEMO HERE

HTML

<div id='top'>Kitchen List</div>
<br />
<div class="container">
    <input type='text' id='input'>
    <button id='click'>Add</button>
    <ol></ol>
    <div id='error'>Please enter a grocery item
        <br />
        <button id='eb'>Close</button>
    </div>
</div>

CSS

.container {
    margin-top: 50px;
}

Answer 2

You need to add another div to wrap the content with a margin-top.

DEMO

http://jsfiddle.net/sZaxc/8/

HTML

<div id='main'>
    <!-- inputs etc -->
</div>

CSS

#main {
    margin-top: 50px;
}

I also added a z-indexand top: 0to your #top-div - just in case.

Answer 3

It's because you have two positions. Remove one and make it:

#top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: fixed;
}