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

Mary-Kate Olsen

Libérer： 2024-12-10 19:17:14

original

486 Les gens l'ont consulté

Why Does My Fixed Header Shift Downward After Setting `position: fixed;`?

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 :

< pré>

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

#header{

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

Copier après la connexion

}

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;

Copier après la connexion

}

.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;

Copier après la connexion

}

#form{

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

Copier après la connexion

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

margin-top:5rem;

Copier après la connexion

}
#description{

font-size:16px;

Copier après la connexion

}
#header-img{

font-size:20px;

Copier après la connexion

}
#header{

font-size:30px;

Copier après la connexion

}
}

 <h1> <nav id="nav-bar"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height:4.5rem;

Copier après la connexion

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!

source：php.cn

Article précédent：Comment puis-je créer des éléments HTML redimensionnables en utilisant uniquement du JavaScript pur ? Article suivant：Pourquoi `$(...).DataTable` n'est-il pas une fonction ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2183

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2330

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1960

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...