posizione: fissa la pagina sovrapposta

Ecco il violino . Sto facendo un’app per la lista della spesa e sto facendo del primo posto una posizione fissa. Quando faccio questo, il div sembra sovrapporsi al resto della pagina. Ho provato a utilizzare due posizioni nel css ( position: relative; position: fixed ) ma ciò non consente al div di restare fisso.

CSS (per il div):

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

HTML (per il div):

 
Kitchen List

Avvolgi il tuo contenuto con div e div il margin-top alla stessa altezza del tuo contenuto fisso.

VEDI DEMO QUI

HTML

 
Kitchen List

    Please enter a grocery item

    CSS

     .container { margin-top: 50px; } 

    È necessario aggiungere un altro div per avvolgere il contenuto con un margin-top .

    DEMO

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

    HTML

     

    CSS

     #main { margin-top: 50px; } 

    Ho anche aggiunto uno z-index e top: 0 al tuo #top -div – per ogni evenienza.

    È perché hai due posizioni. Rimuovi uno e fallo:

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