posición: página superpuesta fija

Aquí está elviolín. Estoy haciendo una aplicación web de lista de compras, y estoy haciendo que la división superior sea una posición fija. Cuando hago esto, el div parece superponerse con el resto de la página. He intentado usar dos posiciones en el css (position: relative; position: fixed) pero esto no permite que el div permanezca fijo.

CSS (para el div):

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

HTML (para el div):

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

Respuestas a la pregunta(3)

Su respuesta a la pregunta