position: fixe chevauchement de la page

Ici est la violon. Je vais faire une liste d'épicerie web app, et je suis en train de haut div une position fixe. Quand je fais cela, la div semble recouvrir le reste de la page. J'ai essayé à l'aide de deux positions dans le css (position: relative; position: fixed) mais cela ne veut pas laisser le div reste fixe.

CSS (div):

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

Fichiers HTML (div):

<div id='top'>Kitchen List</div>
Quelque chose comme cela? jsfiddle.net/sZaxc/7
oui...très bien comme ça.
Ok, j'ai posté la réponse ci-dessous, Veuillez l'accepter.
ok, je peux accepter en 5 min.

OriginalL'auteur Joe Pigott | 2013-09-30

  1. 8

    Envelopper votre contenu avec div et de lui donner la margin-top à la même hauteur que votre contenu fixe.

    VOIR LA DÉMO ICI

    HTML

    <div id='top'>Kitchen List</div>
<br />
<div class="container">
    <input type='text' id='input'>
    <button id='click'>Add</button>
    <ol></ol>
    <div id='error'>Please enter a grocery item
        <br />
        <button id='eb'>Close</button>
    </div>
</div>

    CSS

    .container {
    margin-top: 50px;
}
    Il ne fonctionne que pour la première page lors de l'impression de l'Opéra (Web Kit)

    OriginalL'auteur Vikas Ghodke

  2. 3

    Vous devez ajouter un autre div pour envelopper le contenu avec un margin-top.

    DÉMO

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

    HTML

    <div id='main'>
    <!-- inputs etc -->
</div>

    CSS

    #main {
    margin-top: 50px;
}

    J'ai également ajouté un z-indexet top: 0à votre #top-div - juste au cas où.

    OriginalL'auteur Mr. B.

  3. -1

    C'est parce que vous avez deux positions. Enlever un et le faire:

    #top {
    width: 100%;
    height: 40px;
    background: #96f226;
    text-align: center;
    font-size: 30px;
    color: #252525;
    position: fixed;
}
    Faux! La dernière position remplacer toutes les dernières défini des valeurs de position! Donc, ce que vous avez fait sera exactement le même que le code en question.

    OriginalL'auteur SaturnsEye