Pourquoi mon en-tête fixe se déplace-t-il vers le bas après avoir défini « position : fixe ; » ?

Pourquoi ma barre de titre descend-elle après l'avoir définie sur fixe ?

Contenu de la question

Ma barre de titre est placée entre le titre de la page et la barre de navigation, mais lorsque je la règle sur position:fixed; . Voici le lien Codepen :

[Lien Codepen]

Réponses aux questions

Vous avez rencontré un problème appelé Collapse de la marge problème. Définir la barre de titre sur fixe la fait sortir du flux de documents normal. Le formulaire devient donc le premier élément normal du flux de documents. Cela signifie que la marge supérieure du formulaire s'effondrera ou chevauchera la marge supérieure de l'élément body. ¹

Cela signifie que l'élément body aura une marge supérieure plus grande et votre élément fixe sera positionné par rapport au corps puisque vous ne définissez aucune valeur supérieure. ²

Pour éviter cette situation, vous pouvez choisir la méthode suivante :

• Désactiver le pliage des marges (recommandé) : Cela fonctionne Éviter effondrement des marges et bien d’autres problèmes.
• Définir la valeur supérieure : déplacez la barre de titre là où vous le souhaitez.

Code résolu :

corps {
padding-top:1px; /Désactiver le pliage des marges/
}

#header{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

}

header-img{

font-family : 'Marqueur permanent', cursif ;
couleur:blanc;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:aucun;
display:flex;
direction du flux:row;
justifier-content:espace-autour;
}

barre de navigation{

couleur de fond:#191919;
float:gauche;
width:100%;
}

form{

margin-top:45rem;
margin-left:25%;
margin-right:25%;
}

img{
largeur:70%;
hauteur:70%;
}

a {
text-decoration:none;
font-family: 'Work Sans', cursive;
couleur:blanc;
font-size:12px;
}

email{

width:100%;
box-shadow:3px 3px 5px gris;
}

soumettre{

font-family:'Roboto', cursive;
font-size:14px;
font-weight:bold;
couleur : #686868 ;
boîte-ombre : 3px 3px 5px gris;
padding : 5px 5px;
}

.catalog{
margin-left:10%;
margin-right:10%;
margin-top : 5rem;
largeur:90%;
float:left;
}

mot de passe{

width:100%;
box-shadow:3px 3px 5px gris;
}

vidéo{

margin-top:5rem;
margin-left:25%;
margin-right:25%;
width:50%;
}

courses{

display:flex;
flow-direction:row;
flex-wrap:wrap;
}

description{

famille de polices : 'Oswald', cursive;
taille de police : 20px;
text-align:center;
taille de police:16px;
}

li{
remplissage : .25rem .5rem;
}

a:hover{
color:#4ba0c8;
}

.nav-link{

}

.course-label{
font-family : 'Baloo Bhaijaan', cursive ;
font-size:18px;
}

.images{

background-color:#191919;
height:3rem;
width:100%;
position:fixed;

}

.images:hover{
background-color:#99d3ff;
couleur :#99d3ff;
}

@media (largeur min : 555 px){
#nav-bar{

margin: 5% 5%;
padding: 3% 3%;
width: 10vw;
height:10vw;
color:#d2d2d2;

}

#form{

float:right;
width:20rem;
margin-right:1rem;

}
}
@media (largeur min : 360 px){
a{

margin-top:5rem;

}
#description{

font-size:16px;

}
#header-img{

font-size:20px;

}
#header{

font-size:30px;

}
}

 <h1> <nav id="nav-bar"><pre class="brush:php;toolbar:false">height:4.5rem;

Commencer gratuitement

• Community
• Catalog
• Pricing

<hr>

<img src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" class="lazy" alt="python">
<p></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!