web-dev-qa-db-fra.com

l'en-tête du site Web se cache derrière le contenu lorsque la position est corrigée

Je conçois un site Web pour une école et je veux que l’en-tête du site soit corrigé, comme l’a fait Facebook. J'ai essayé le correctif fourni par this question sur stackoverflow mais il n’était guère utile dans l’en-tête. J'ai une image, essentiellement le logo de l'école, où je fais position: fixed, mais L'en-tête se 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é plusieurs solutions à cela, mais quoi que je fasse, l'en-tête va derrière la page. Je veux aussi que la barre de menu soit corrigée mais c'est pareil ... 

csscss-position
10
lucifer

Ajoutez z-index: 1000 au css #header et ajoutez padding-top au css du corps, ce qui devrait être un peu plus que la hauteur de l'en-tête. Par exemple, si la hauteur de l'en-tête est 40px, placez le padding-top: 50px dans le css du corps et cela devrait fonctionner.

28
vivek

Lorsque vous ajoutez une position fixe et/ou absolue à un élément, cela signifie que l'élément laissera le flux naturel et qu'il appartient maintenant à un "calque" qui n'est pas lié au calque où tous les éléments sont associés au flux naturel du document. .

C’est une fonctionnalité intéressante, car vous pouvez maintenant positionner ces éléments n’importe où sans se préoccuper du reste de la page. 

Alors, à propos de ton cas. Vous avez choisi la bonne position, fixe. Maintenant, les éléments ci-dessus ne le voient pas et vous devez ajouter manuellement la hauteur de cet élément d'en-tête sous forme de marge et/ou de remplissage en haut de l'élément suivant. 

Par exemple, si vous aviez ce qui suit:

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

En répétant ce que vous avez ajouté, vous ajoutez une position fixée à l'en-tête et si sa hauteur est de 50 px, l'élément de contenu obtiendrait un padding-top: 50px et il devrait faire l'affaire.

   <style>
   .header{position:fixed;top:0;height:50px;}
   .content{padding-top:50px;}
   </style>
6
Vinicius Santana

Lorsque vous définissez l'élément avec un positionnement fixe, cela suppose que les autres éléments voisins n'existent pas. Donnez à l’élément que vous voulez fixer un z-index plus grand. Ensuite, pour éviter le chevauchement, attribuez à l’élément précédé de l’élément fixe la même hauteur de remplissage que la hauteur de celui-ci. J'espère que ça aide.

1
Vik
 #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;
    }
0
shriganth

CSS Z-index pourrait être votre solution

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

0
thedrs