Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Einführung in die Positionierung in CSS `position` bedeutet im Englischen`位置`und seine Hauptfunktion in `CSS` besteht darin, die Positionierung von Elementen festzulegen. Es gibt `3` Arten der Positionierung in `CSS` :

Einführung in die Positionierung in CSS

position bedeutet im Englischen位置und seine Hauptfunktion in CSS besteht darin, die Positionierung von Elementen festzulegen.

Es gibt 3 Arten der Positionierung in CSS :

Eigenschaftswert	beschreiben
behoben	Feste Positionierung einstellen.
relativ	Relative Positionierung festlegen.
Absolute	Absolute Positionierung festlegen.

Feste Positionierungspraxis

Bevor wir die feste Positionierung üben, schauen wir uns an, wie die Codestruktur aussieht.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      
       Breite: 100px;
       Höhe: 100px;
       Hintergrundfarbe: rot;
       Rand: 0;
       Polsterung: 0;
     }
     div{
       Breite: 200px;
       Höhe: 200px;
       Hintergrundfarbe: Frühlingsgrün;
        Rand: 0;
        Polsterung: 0;
     }
  </Stil>
</Kopf>

<Text>
   <h1 Klasse="Box"></h1>
   <div></div>
</body>

</html>

Ergebnisdiagramm

Jetzt werde ich das h1 Element auf eine feste Position setzen, um zu sehen, wie es sich von der obigen Strukturpraxis unterscheidet. Anschließend werden wir einige Merkmale der festen Positionierung analysieren.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Position: fest;
       Breite: 100px;
       Höhe: 100px;
       Hintergrundfarbe: rot;
       Rand: 0;
       Polsterung: 0;
     }
     div{
       Breite: 200px;
       Höhe: 200px;
       Hintergrundfarbe: Frühlingsgrün;
        Rand: 0;
        Polsterung: 0;
     }
  </Stil>
</Kopf>

<Text>
   <h1 Klasse="Box"></h1>
   <div></div>
</body>

</html>

Ergebnisdiagramm

Die Festpositionierungseigenschaften werden wie folgt analysiert:

Die feste Positionierung wird relativ zum Browserfenster festgelegt. Unabhängig davon, wie die Seite gescrollt wird, wird die Position des fest positionierten Elements nicht beeinflusst.
Merkmale von Elementen mit fester Positionierung: Sie wurden vom Standard-Dokumentenfluss getrennt.
Eigenschaften von Elementen mit fester Position: Ihre Hierarchie ist höher als bei Elementen im Standarddokumentenfluss. Wenn wir also eine feste Positionierung für das h1-Tag festlegen, überlappt es das div-Tag.
Besonderheiten von Festpositionierungselementen: Der h1-Tag steht über dem div-Tag, sodass das Festpositionierungselement keinen Platz mehr einnimmt

Relative Positionierungspraxis

Bevor wir die relative Positionierung üben, schauen wir uns an, wie die Codestruktur aussieht.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Jetzt werde ich class Klassenattributwert des .div2 Elements auf relative Positionierung einstellen, um den Unterschied zur obigen Strukturpraxis zu sehen. Anschließend werden wir einige Merkmale der relativen Positionierung analysieren.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
       Position: relativ;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Wenn wir die Koordinatenposition für die relative Positionierung nicht festlegen, erfolgt überhaupt keine Bewegung.

Der Autor legt die Positionierungskoordinaten für das div2 Element mit class fest.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
       Position: relativ;
       links: 50px;
       oben: 50px;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Die relativen Positionierungseigenschaften werden wie folgt analysiert:

Relativ positionierte Elemente weichen nicht vom Standarddokumentenfluss ab.
Wenn für ein relativ positioniertes Element keine Koordinaten festgelegt sind, bleibt es an seiner Position.
Das relativ positionierte Element legt die Koordinatenposition fest und beginnt mit der Berechnung der Bewegungsposition basierend auf der ursprünglichen Position.
Relativ positionierte Elemente befinden sich auf einer höheren Ebene als die Elemente im Standarddokumentenfluss und überdecken die Elemente im Standarddokumentenfluss.
Für relativ positionierte Elemente kann ein negativer Wert eingestellt werden.

Absolute Positionierungspraxis

Bevor wir die absolute Positionierung üben, schauen wir uns an, wie die Codestruktur aussieht.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Jetzt werde ich class Klassenattributwert des .div2 Elements auf absolute Positionierung setzen, um den Unterschied zur obigen Strukturpraxis zu sehen. Anschließend werden wir einige Merkmale der absoluten Positionierung analysieren.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
       Position: absolut;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Die absolute Positionierung liegt außerhalb des Standarddokumentenflusses.

Der Autor legt die Positionierungskoordinaten für das div2 Element mit einem class fest. Um den Lesern einen intuitiven Eindruck zu vermitteln, habe ich die zentrierte Ausrichtung für das äußerste div Element festgelegt.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      Rand: 0px automatisch;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
       Position: absolut;
       links: 0px;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Warum erscheinen absolut positionierte Elemente am linken Rand des Browsers? Das Prinzip der absolut positionierten Bewegung: Das absolut positionierte Element sucht nach dem übergeordneten Element, um zu sehen, ob es eine Positionierung hat. Wenn es eine Positionierung hat, wird es entsprechend dem übergeordneten Element positioniert. Wenn das übergeordnete Element keine Positionierung hat, wird nach dem übergeordneten Element des übergeordneten Elements gesucht, um zu sehen, ob es eine Positionierung hat, und so weiter, bis body Element stoppt, da body Element die Position des Browsers ist. Nachdem so viel gesagt wurde, vermittelt der Autor neuen Lernenden einen intuitiven Eindruck, also lassen Sie uns dies in die Praxis umsetzen und den wahren Trick sehen.

Codeblöcke

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <title>Positionierung</title>
  <Stil>
     .Kasten{
      Breite: 400px;
      Höhe: 300px;
      Rand: 1px durchgehend dunkelorange;
      Rand: 0px automatisch;
      Position: relativ;
      
     }
    .box div{
       Breite: 100px;
       Höhe: 100px;
     }
     .div1{
       Hintergrundfarbe: rot;
     }
     .div2{
       Hintergrundfarbe: schieferblau;
       Position: absolut;
       rechts: 0px;
     }
     .div3{
       Hintergrundfarbe: Frühlingsgrün;
     }
  </Stil>
</Kopf>

<Text>
   <div Klasse="Box">
     <div Klasse="div1"></div>
     <div Klasse="div2"></div>
     <div Klasse="div3"></div>
   </div>
</body>

</html>

Ergebnisdiagramm

Hinweis: Jetzt hat der Autor die absoluten Positionierungskoordinaten in die rechte Positionierung geändert und das übergeordnete Element hat eine relative Positionierung festgelegt. Ich werde es hier nicht üben. Wenn das übergeordnete Element des positionierten übergeordneten Elements auch das Großvaterelement ist und sowohl das übergeordnete Element als auch das Großvaterelement gleichzeitig positioniert werden, wird das Element gemäß dem übergeordneten Element und nicht gemäß dem Großvaterelement positioniert.

Die Eigenschaften der absoluten Positionierung werden wie folgt analysiert:

Absolut positionierte Elemente liegen außerhalb des Standarddokumentenflusses.
Absolut positionierte Elemente überschreiben Elemente im Standarddokumentenfluss.
Ein absolut positioniertes Element nimmt keinen Platz mehr ein.
Absolut positionierte Elemente werden basierend darauf positioniert, ob sie sich zwischen den Vorgängerelementen des übergeordneten Elements befinden. Wenn dies der Fall ist, wird die Positionierung basierend auf dem nächstgelegenen Element festgelegt. Wenn nicht, basiert die Positionierung auf dem Body-Element.
Das übergeordnete Element eines absolut positionierten Elements kann auf jede beliebige Weise positioniert werden, einschließlich absoluter Positionierung. Ich empfehle die Verwendung der relativen Positionierung, die normalerweise in Verbindung mit der absoluten Positionierung verwendet wird.

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.

<<: So erstellen Sie mit Harbor ein privates Docker-Repository

>>: Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten

Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

Artikel

Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue

Detaillierte Erläuterung des Problems der Übereinstimmung, selbst wenn in der MySQL-Abfragebedingung am Ende der Zeichenfolge ein Leerzeichen steht

1. Tabellenstruktur TABELLE person Ausweis Name 1...

Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue

Detaillierte Erläuterung des Nginx-Forward-Proxys und des Reverse-Proxys

Detaillierte Analyse des MySQL 8.0-Redo-Logs

Windows Server 2019 installieren (grafisches Tutorial)

MySQL-Abfragemethode mit mehreren Bedingungen

Detaillierte Erläuterung der JDBC-Datenbankverknüpfung und der zugehörigen Methodenkapselung

Grundlegendes Nutzungs-Tutorial zur IPTABLES-Firewall unter LINUX

CentOS8-Installationstutorial für JDK8/Java8 (empfohlen)

Ausführliches Tutorial zu Installations- und Upgradeproblemen bei MySQL 5.7.30

Artikel empfehlen

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

So erstellen Sie eine MySQL-Datenbank (de1) mit Befehlen

So öffnen Sie den Port in Centos7

Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework

Detaillierte Erläuterung des Problems der Übereinstimmung, selbst wenn in der MySQL-Abfragebedingung am Ende der Zeichenfolge ein Leerzeichen steht

Analyse der Vorteile von path.join() in Node.js

So kapseln Sie Timerkomponenten in Vue3

2017 neueste Version der Windows-Installation MySQL-Tutorial

Kapseln Sie die Navigationsleistenkomponente mit Vue

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22

MySQL partitioniert vorhandene Tabellen in der Datentabelle

MySQL-Datenbankindizes und -Transaktionen

Öffentliche kostenlose STUN-Server

Lösungen für ungültige Nullsegmentbeurteilungen und IFNULL()-Fehler in MySql