CSS-Probleme bei der gemeinsamen Verwendung von „Position:fixed“ und „Margin-top“ auf Elementen derselben Ebene
|
Problembeschreibung Ich möchte CSS verwenden, um den oberen Fixeffekt zu erzielen:
Versuchen Sie, margin-top und position:fixed zu implementieren. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=Gerätebreite">
<title>Test</title>
<style type="text/css">
.header {
Position: fest;
Höhe: 20px;
Breite: 100 %;
}
.Inhalt {
Rand oben: 30px;
}
.beiseite {
schweben: links;
Breite: 200px;
Hintergrund: orange;
}
.hauptsächlich {
Überlauf: automatisch;
Hintergrund: gelb;
}
</Stil>
</Kopf>
<Text>
<div class="header">123</div>
<div Klasse="Inhalt">
<div class="aside">beiseite</div>
<div Klasse="main">Haupt</div>
</div>
</body>
</html>Dies hat zur Folge, dass die Kopfzeile nicht oben positioniert wird, sondern der Abstand zwischen Seitenrand und oberem Rand des Inhalts frei wird:
Gemäß der Definition von position:fixed wurde die Kopfzeile vom Dokumentfluss getrennt und sollte vom Inhaltslayout nicht beeinflusst werden, dies ist jedoch nicht der Fall. Problemerkundung 1. Ändern Sie den oberen Rand des Inhalts in „obere Polsterung“: Der erwartete Effekt kann erzielt werden. TBD: Detaillierter Testcode und Effektdiagramm werden später hinzugefügt (￣∇￣) … Zusammenfassen Es läuft alles auf die Auswirkung des Zusammenbruchs des oberen Rands auf die Position „fixiert“ hinaus. Erstens ist für ein Element vom Typ „position: fixed“ der Referenzursprung in vertikaler Richtung die Oberkante des Inhalts des Body-Box-Modells, wenn „top“ nicht angegeben ist. Wenn „oben“ angegeben ist, ist sein Referenzursprung in vertikaler Richtung das, was wir oft als obere Grenze des Ansichtsfensters bezeichnen, und dasselbe gilt für die linke und horizontale Richtung. Der Bezugsursprung bezieht sich hierbei auf das Bezugsobjekt beim Layouten des Fixelements. Ist die Position des Fixelements einmal festgelegt, ändert sich diese auch dann nicht mehr, wenn die Seite nach unten gezogen wird und sich die obere Begrenzung des Bodys nach oben verschiebt. Zweitens wird sich der Inhaltsteil des Textkörpers aufgrund des Problems des Zusammenbruchs des oberen Rands nach dem Festlegen des oberen Rands des Inhalts nach unten bewegen, das heißt, er wird in Bezug auf den Ursprung nach unten bewegt, sodass das feste Element Platz für den oberen Rand lässt. Daher kann dieses Problem aus zwei Blickwinkeln gelöst werden: 1. Ändern Sie den Referenzursprung zum Ansichtsfenster: Legen Sie die Oberseite des festen Elements fest. 2. Lösen Sie das Problem des Rand-Oberseiten-Zusammenbruchs. Weitere Methoden finden Sie unter dem folgenden Link: 1) Polsterung oben auf den Körper setzen. Haben Sie es vorerst einfach noch etwas länger in Geduld. Ich werde es perfektionieren, wenn ich mit dieser Zeit genug zu tun habe (trauriges Gesicht) (trauriges Gesicht). . .
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Dünne Linientabelle zum Drucken von Webseiten + ultimative Strategie zum Drucken von Seiten
>>: Praxis des El-Cascader-Kaskadenselektors in ElementUI
Artikel empfehlen
Einführung in die Leistungsoptimierung von MySQL-Datenbanken
Inhaltsverzeichnis Warum optimieren? ? Wo soll ic...
Verwendung des Array-Filters filter() in JS
Inhaltsverzeichnis 1. Einleitung 2. Einführung in...
Der Unterschied zwischen char und varchar in MySQL
CHAR- und VARCHAR-Typen sind ähnlich und untersch...
Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Beispiel für das Abrufen der neuesten Daten mithilfe einer MySQL-Mehrtabellenassoziations-Eins-zu-viele-Abfrage
Dieser Artikel beschreibt anhand eines Beispiels,...
Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird
Als ich eine neue Version der Konfigurationsschni...
So exportieren Sie MySQL-Abfrageergebnisse in CSV
Um MySQL-Abfrageergebnisse in CSV zu exportieren,...
Ein kurzer Vortrag über die Geschichte von React Router
Wenn Sie React Router verstehen möchten, sollten ...
Kurze Analyse der geplanten MySQL-Sicherungsaufgaben
Einführung Um Datenverlust in einer Produktionsum...
MySQL-Dienst und Datenbankverwaltung
Inhaltsverzeichnis 1. Anweisungen zum Starten und...
js+css zur Realisierung eines dreistufigen Navigationsmenüs
In diesem Artikelbeispiel wird der spezifische Co...
Beispielcode für MySQL-Datensicherung und -wiederherstellung
1. Datensicherung 1. Verwenden Sie den Befehl mys...
Zusammenfassung zum Sharding von MySQL-Datenbanken und -Tabellen
Während der Projektentwicklung werden unsere Date...
Erläuterung des MySQL-Abfragebeispiels anhand instanziierter Objektparameter
Dieser Artikel stellt vor, wie Sie durch Instanzi...
10 HTML-Tabellen-bezogene Tags
Tatsächlich werden viele Leute sagen: „Ich habe ge...