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

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:

< pre>

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

#header{

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

Nach dem Login kopieren

}

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;

Nach dem Login kopieren

@media (min-width:555px){

#nav-bar{

}

#form{

}

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

Nach dem Login kopieren

@media (min-width:360px){

}

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

Nach dem Login kopieren

#description{

}
#header-img{

margin-top:5rem;

Nach dem Login kopieren

}
#header{

font-size:16px;

Nach dem Login kopieren

}
}

 <h1> <nav id="nav-bar"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">font-size:20px;

Nach dem Login kopieren

font-size:30px;

Nach dem Login kopieren

height:4.5rem;

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich skalierbare HTML-Elemente nur mit reinem JavaScript erstellen? Nächster Artikel：Warum ist „$(...).DataTable“ keine Funktion?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2201

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2347

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1965

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...