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.
2. Der Inhalt legt den oberen Rand und die obere Polsterung gleichzeitig fest: Der obere Randraum bleibt erhalten.
3. Legen Sie die Polsterung oben auf den Körper: So bleibt Platz für die Polsterung oben auf dem Körper, um den gewünschten Effekt zu erzielen.
4. Wenn Sie am Textkörper einen oberen Rand festlegen, bleibt ein Abstand von max(Textkörper->oberer Rand, Inhalt->oberer Rand) bestehen.
5. Legen Sie den oberen Rand der Kopfzeile fest, z. B. top: 0; Er wird durch das Layout des Textkörpers und des Inhalts nicht beeinflusst.

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.
2) Legen Sie einen Rahmen für den Textkörper fest. Die Rahmenfarbe sollte mit der Hintergrundfarbe übereinstimmen.
3) Position festlegen: Am Textkörper fixiert, wodurch die Bildlaufleiste des Textkörpers verschwindet.

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). . .
TBD: Der Inhaltsname und der Boxmodellinhalt wurden geändert und müssen geändert werden …

Verstehe „Position: fest“ nicht? => Position|MDN
Sie verstehen den Margin-Top-Collapse nicht? => Das Phänomen und die Lösung des Margin-Top-Collapse-Problems

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

js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen

CSS-Probleme bei der gemeinsamen Verwendung von „Position:fixed“ und „Margin-top“ auf Elementen derselben Ebene

js implementiert eine einfache Methode zur Kapselung von jQuery und eine detaillierte Erklärung der Kettenoperationen

Verwenden von CSS zur Implementierung von Bildrahmenanimationen und Kurvenbewegungen

Tutorial zur Installation von Ubuntu 20.04 und NVIDIA-Treibern

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Natives JS-objektorientiertes Tippspiel

So erstellen Sie dynamische QML-Objekte in JavaScript

CSS- und HTML- und Front-End-Technologie-Schichtendiagramm

So unterstützen Sie Webdings-Schriftarten in Firefox

Beispiel für eine Domänennamenüberprüfungsmethode für Betrieb und Wartung von Nginx

MySQL 5.7.18 MSI-Installations-Grafik-Tutorial

Artikel empfehlen

Detailliertes Installations- und Konfigurationstutorial von MySQL 5.7 unter Win10

Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines

Detaillierte Erläuterung des Docker-Datensicherungs- und Wiederherstellungsprozesses

Detaillierte Erläuterung der Docker-Container-Cross-Host-Multi-Netzwerksegment-Kommunikationslösung

Semantik, Schreiben und bewährte Methoden für Link A

Nginx löst Cross-Domain-Probleme und bindet Seiten von Drittanbietern ein

Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays

Analyse des Prinzips des MySQL-Extraktionsmodus für große Tabellen aus der Perspektive des Cloud-Datenmigrationsdienstes

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle

Analyse des Linux-Hochleistungsnetzwerk-IO- und Reaktormodells

Vier Möglichkeiten, CSS und HTML zu kombinieren

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Eine kurze Diskussion über einige Vorteile von Vue3

Ist Ihre Website für IE8 geeignet?