Warum verschiebt sich mein fester Header nach unten, nachdem „position: Fixed;' festgelegt wurde?

Warum verschiebt sich meine Titelleiste nach unten, nachdem ich sie auf „Fest“ gesetzt habe?

Frageninhalt

Meine Titelleiste befindet sich zwischen dem Seitentitel und der Navigationsleiste, aber wenn ich sie auf position:fixed stelle, haben sich die Ränder vergrößert . Das Folgende ist der Codepen-Link:

[Codepen-Link]

Fragenantworten

Sie sind auf ein Problem namens Margin Collapse gestoßen Problem. Wenn Sie die Titelleiste auf „Fest“ setzen, wird sie aus dem normalen Dokumentfluss entfernt. Daher wird das Formular zum ersten normalen Dokumentflusselement. Dies bedeutet, dass der obere Rand des Formulars reduziert oder den oberen Rand des Körperelements überlappt. ¹

Das bedeutet, dass das Körperelement einen größeren oberen Rand hat und Ihr festes Element relativ zum Körper positioniert wird, da Sie keinen Oberwert festlegen. ²

Um diese Situation zu vermeiden, können Sie die folgende Methode wählen:

• Randfaltung deaktivieren (empfohlen): Dies funktioniert Vermeiden Margenverfall und viele andere Probleme.
• Top-Wert festlegen: Verschieben Sie die Titelleiste an die gewünschte Stelle.

Aufgelöster Code:

body {
padding-top:1px; /Randfaltung deaktivieren/
}

#header{

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

}

header-img{

Schriftfamilie: 'Permanent Marker', kursiv;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:none;
display:flex;
flow-direction:row;
justify-content:space-around;
}

nav-bar{

background-color:#191919;
float:left;
width:100%;
}

form{

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

img{
width:70%;
height:70%;
}

a {
text-decoration:none;
font-family: 'Work Sans', cursive;
color:white;
Schriftgröße:12px;
}

E-Mail{

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

submit{

font-family:'Roboto', cursive;
font-size:14px;
font-weight:bold;
color:#686868;
box-shadow:3px 3px 5px grey;
padding: 5px 5px;
}

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

password{

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

video{

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

courses{

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

Beschreibung{

Schriftfamilie: 'Oswald', kursiv;
Schriftgröße: 20px;
text-align:center;
Schriftgröße: 16px;
}

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

a:hover{
color:#4ba0c8;
}

.nav-link{

}

.course-label{
Schriftfamilie: 'Baloo Bhaijaan', kursiv;
Schriftgröße: 18 Pixel;

Farbe:#99d3ff;

}

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

@media (min-width:555px){

#nav-bar{

}

#form{

}

}

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

@media (min-width:360px){

a{

}

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

#description{

}
#header-img{

margin-top:5rem;

}
#header{

font-size:16px;

}
}

 <h1> <nav id="nav-bar"><pre class="brush:php;toolbar:false">font-size:20px;

font-size:30px;

Loslegen kostenlos

height:4.5rem;

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich mein fester Header nach unten, nachdem „position: Fixed;' festgelegt wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!