Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > CSS-Tutorial > Warum kann sich ein fest positioniertes Element mit seinen Geschwisterelementen verschieben?

Warum kann sich ein fest positioniertes Element mit seinen Geschwisterelementen verschieben?

Patricia Arquette

Freigeben： 2024-10-24 18:43:26

Original

482 Leute haben es durchsucht

Why Can a Fixed-Positioned Element Shift with Its Sibling Elements?

Warum sich ein Element mit fester Position mit seinem Geschwister bewegt

Obwohl ein Element mit „position:fixed“ aus dem Dokumentenfluss entfernt wurde, kann es immer noch sein von seinen Geschwistern beeinflusst. Dies liegt an der Art und Weise, wie das Ansichtsfenster berechnet wird.

Das Ansichtsfenster ist der Bereich innerhalb des Browserfensters, der für den Benutzer sichtbar ist. Es wird anhand der In-Flow-Elemente berechnet, bei denen es sich um die Elemente handelt, die am regulären Dokumentenfluss teilnehmen.

Im bereitgestellten HTML ist das erste In-Flow-Element

, das über einen Rand oben verfügt : 90px. Da der

Element fest ist, wird es bei der Berechnung des Ansichtsfensters nicht berücksichtigt.

Der Standardrand von 8 Pixeln auf dem Das Element wird mit dem Rand auf

reduziert. Dies führt dazu, dass beide Elemente um 90 Pixel nach unten verschoben werden, was sich auf die Position des festen Headers auswirkt.

Um dies zu beheben, fügen Sie einfach top: 0 zum Header-CSS hinzu, um ihn unabhängig davon oben im Ansichtsfenster zu platzieren Ränder der Geschwisterelemente.

Das obige ist der detaillierte Inhalt vonWarum kann sich ein fest positioniertes Element mit seinen Geschwisterelementen verschieben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php

Vorheriger Artikel：## Wie positioniere ich das Ansichtsfenster eines Texteingabefelds so, dass das Ende einer langen Zeichenfolge angezeigt wird? Nächster Artikel：Wie verwaltet die Z-Index-Eigenschaft die Elementpositionierung?

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

2189

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

2336

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

1963

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