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

Answer 1

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

DEMO

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

HTML

CSS

#main {
    margin-top: 50px;
}

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