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

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;
}