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
Javascript-Betriebsmechanismus „Event Loop“
Inhaltsverzeichnis 1. Vier Konzepte 1. JavaScript...
Verwenden Sie die mail()-Funktion von PHP zum Senden von E-Mails
Senden von E-Mails mit der Mail-Funktion von PHP ...
Der gesamte Prozessbericht der Vue-Exportfunktion für Excel
Inhaltsverzeichnis 1. Front-End-Führungsprozess: ...
Details zur MySQL-Transaktionsisolationsebene
serializable Serialisierung (kein Problem) Transa...
Implementierung der gleichmäßigen Aufteilung des übergeordneten Containers (perfekte Drittel) in CSS
Die Breite des übergeordneten Containers ist fest...
Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets
1. Was ist Docker Secret 1. Szenariodarstellung W...
Das Problem, dass bei der Installation von RabbitMQ in Docker die Verwaltungsseite nicht aufgerufen werden kann
1. Umweltvorbereitung Tencent Cloud Server CENTOS...
Eine kurze Diskussion zur Logikextraktion und Feldanzeige von Vue3 in Projekten
Inhaltsverzeichnis Logische Schichtung Trennen Si...
Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers
/****************** * Zeitverwaltung des Linux-Ke...
So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL
Das MySQL-Protokoll für langsame Abfragen ist seh...
RGB-Farbtabellensammlung
RGB-Farbtabelle Farbe Englischer Name RGB 16 Farb...
Tutorial zur HTML-Tabellenauszeichnung (37): Hintergrundbild-Attribut BACKGROUND
Legen Sie das Hintergrundbild für die Tabellenübe...
Detaillierte Erklärung des Inline-Formats von HTML-Tabellen
Inline-Format <colgroup>…</colgroup> ...
JS verwendet Map, um doppelte Arrays zu integrieren
Inhaltsverzeichnis Vorwort Daten simulieren Zusam...
Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung
Inhaltsverzeichnis Überblick Installieren Sie Gul...