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

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

SEE DEMO HERE

HTML

Kitchen List



    
    Add
    

    
Please enter a grocery item
        

        Close
    

CSS

.container {
    margin-top: 50px;
}