site web de l'en-tête cache derrière le contenu lorsque la position est fixe

Je suis en train de concevoir un site web pour une école et je veux l'en-tête de site fixe, tout comme facebook. J'ai essayé le correctif fourni par cette question sur stackoverflow mais il était difficilement utilisables dans l'en-tête. J'ai une image, en gros le logo de l'école, où je ne position: fixed, mais
l'en-tête cache derrière la page.

HTML:

<body>
  <div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>

    <div id="menu">
      <ul>
           <li><a href="index.html"><abbr title="Home">Home&nbsp;&nbsp;</abbr></a></li>
           <li><a href="aboutus.html"> <abbr title="About Us">About Us&nbsp;&nbsp;</abbr> </a></li>
           <li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li>
           <li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li>
           <li><a href="news.html"><abbr title="News">News</abbr></a></li>
           <li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li>
           <li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li>
      </ul>     
        <div class="cleaner"></div>
  </div>

CSS: 

#header {
    margin-left: 0px;
    width: auto;
    height: 90px;
    padding: 0px;
    padding-left:185px;
    font-size: 35px; color:#FFFFFF; 
    background-color: #f6c491;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
#menu {
    position: relative;
    clear: both;
    width: auto;
    height: 38px;
    padding: 0;
    padding-left:185px;
    background-color:#FFFFFF;   
    margin-bottom: 10px;
    margin-left:0px;
}

#menu ul {
    float: left;
    width: 960px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    padding: 0px;
    margin: 0px;
    display: inline;
}

#menu a {
    float: left;
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #000;
    outline: none;
    border: none;   
    border-top: 3px solid black;
}

J'ai essayé un certain nombre de solutions, mais quoi que je fasse, l'en-tête passe derrière la page. Je veux que la barre de menu également à être fixé, mais il est aussi le même...

le navigateur u l'utilisation d'ie, les plus grands ne supporte pas de position fixe
En fait, je suis à l'aide de la Dernière version stable de navigateurs: Chrome 20 IE 9 et safari 5.6

OriginalL'auteur lucifer | 2012-06-02

  1. 28

    Ajouter z-index:1000 à l'en-tête #css, et ajouter un padding-top pour le corps css qui devrait être un peu plus que de l'en-tête de la hauteur. Par exemple, si l'en-tête de la hauteur est 40px, mettre le padding-top: 50px pour le corps css et cela devrait fonctionner.

    je l'ai fait, mais après l'avoir fait mon en-tête est maintenant au-dessus du reste du contenu! ainsi, les utilisateurs n'auront qu'-tête de n'importe quel autre contenu
    Vous pouvez ajouter un padding-top pour le corps css qui devrait être un peu plus que de l'en-tête de la hauteur. Par exemple, si l'en-tête de la hauteur est 40px, mettre le padding-top: 50px pour le corps css et cela devrait fonctionner.
    merci cela a fonctionné:)

    OriginalL'auteur vivek

  2. 6

    Lorsque vous ajoutez position fixe et/ou absolue d'un élément, cela signifie que l'élément ne sera laisser le flux naturel et maintenant il appartient à la "couche" qui n'est pas liée à la couche où tous les éléments sont avec le flux naturel du document.

    C'est une grande fonctionnalité que vous pouvez maintenant positionner ces éléments n'importe où sans worring sur le reste de la page.

    Donc, à propos de votre affaire. Vous avez choisi la bonne position fixe. Maintenant, les éléments ci-dessus, il ne veut pas le voir et vous devez l'ajouter manuellement la hauteur de l'en-tête de l'élément de marge et/ou de remplissage vers le haut de l'élément suivant.

    Par exemple, si vous avez eu la suivante:

       <div class="header"></div>
   <div class="content"></div>

    De répéter ce que vous avez fait ajouter une position fixe de la tête et en considérant que c'est la hauteur est de 50 px de l'élément de contenu pourrait obtenir un padding-top:50px et il devrait faire l'affaire.

       <style>
   .header{position:fixed;top:0;height:50px;}
   .content{padding-top:50px;}
   </style>
    merci pour le partage, semble que vous étiez le seul qui a donné une réponse qui a du sens...avez-vous une référence à ce sujet: ...il appartient à la "couche" qui n'est pas liée à la couche...
    C'est comme si l'écoulement naturel des éléments est ci-dessous le flux des éléments avec des positions déterminées par les css. Bien sûr, vous pouvez le contrôler avec z-index. J'ai appelé couche, la bi dimensionnelle plan stipulé par chaque z-index de la valeur.

    OriginalL'auteur Vinicius Santana

  3. 1

    Lorsque vous définissez un élément fixe de positionnement, Il suppose que les autres éléments voisins n'existent pas. Donner à l'élément que vous voulez être fixé à une plus grande z-index. Alors pour éviter le chevauchement, donner à l'élément précédée par l'élément fixe de la même padding-top de la hauteur de l'élément fixe. Espérons que cela aide.

    OriginalL'auteur Vik

  4. 0

    CSS Z-index pourrait être votre solution

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

    OriginalL'auteur thedrs

  5. 0
     #header {
      margin-top:-38px; //solution
      margin-left: 0px;
      width: auto;
      height: 90px;
      padding: 0px;
      padding-left:185px;
      font-size: 35px; 
      color:#FFFFFF;   
      background-color: #f6c491;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }

    OriginalL'auteur shriganth