CSS Collant en-tête
J'ai ajouté un collant à l'entête de ma page d'accueil, cependant, le collant en-tête semble être à la traîne du reste du contenu sur la page, donc quand j'ai faites défiler la page, les images et le texte sont sur le dessus de la tête, est-il un moyen pour que cela cesse?
Voici mon code:
<style>
/* Reset body padding and margins */
body
{
margin: 0;
padding: 0;
}
/* Make Header Sticky */
#header_container
{
background: #827878;
border: 1px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header
{
line-height: 60px;
margin: 10 auto;
width: 940px;
text-align: left;
font-size: 26px;
color: #f5f5f5;
line-height: 28px;
margin-bottom: 14px;
font-family: 'Source Sans Pro',sans-serif;
}
/* CSS for the content of page. I am giving top and bottom
padding of 80px to make sure the header and footer
do not overlap the content. */
#container
{
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 940px;
}
#content
{
}
/* Make Footer Sticky */
#footer_container
{
background: #eee;
border: 1px solid #666;
bottom: 0;
height: 60px;
left: 0;
position: fixed;
width: 100%;
}
#footer
{
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
</style>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
Quelque chose comme cela? Ajouté z-index:9999 à en-tête contenant. jsfiddle.net/hGYkt
OriginalL'auteur Shane | 2013-09-16
Vous devez vous connecter pour publier un commentaire.
Ajouter ce code.. Ajouter z-index:1000 dans les deux #header_container & z-index:1001 #styles d'en-tête
menu_sticky { float: left; width: 100%; top: 200px; position: absolute; z-index: 1001; background: #f9f9f9 url(../images/menu-shadow.png) repeat-x left bottom; }
Pourquoi ne pas ajouter
z-index: 2001;
? C'est 1000x mieux. ; )Une autre chose que vous pourriez*... c'est en fait de déplacer la tête de balisage vers le bas de la page. Les choses naturellement pile que vous vous déplacez vers le bas à travers le balisage.
OriginalL'auteur Kailash Ahirwar
Suffit d'utiliser le z-index du paramètre.
Par exemple z-index: 2 (présent de l'ordre de la couche)
Il est disponible uniquement pour les éléments qui utiliser position: absolute, relative ou fixe
W3schools exemple:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Envoyé à partir de l'iphone
OriginalL'auteur Dvir
À votre en-tête ajouter:
Ce sera le soulever au-dessus de tout le reste
position: absolute;
de casser cette fonctionnalité. Ils ont déjà obtenuposition: fixed;
doncz-index
est la seule chose nécessaire.OriginalL'auteur SaturnsEye