Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)
|
Einführung in die Positionierung in CSS Es gibt |
| 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
Artikel empfehlen
MySQL-Konvertierung von Spalten in Zeilen, Methode zum Zusammenführen von Feldern (unbedingt lesen)
Datenblatt: Von Spalte zu Zeile: mit max(case whe...
Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)
Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...
Grafisches IDEA-Tutorial zum Konfigurieren des Tomcat-Servers und Veröffentlichen von Webprojekten
1. Nachdem Sie das Webprojekt erstellt haben, müs...
So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL
Während des Entwicklungs- und Debugging-Prozesses...
Der DOCTYPE-Modusauswahlmechanismus bekannter Browser
Dokumentumfang Dieser Artikel behandelt den Modus...
So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen
Standort / { Index Index.jsp; Proxy_next_upstream...
Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben
Vor CSS3 konnten Verlaufsbilder nur als Hintergru...
Detaillierte Erläuterung der Verwendung von MySQL-Profilen zur Analyse von langsamem SQL (Group Left Join ist effizienter als Unterabfrage)
Verwenden Sie ein Profil, um langsames SQL zu ana...
Erstellen eines Redis-Clusters auf Docker
Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Erst...
Das ganz links stehende Übereinstimmungsprinzip des MySQL-Datenbankindex
Inhaltsverzeichnis 1. Gemeinsame Indexbeschreibun...
Erläuterung der Array-Verarbeitung in React und Redux
Dieser Artikel stellt einige häufig verwendete Fu...
Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?
Gängige Methoden zur Begrenzung der Eingabe 1. Um ...
Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation
1. Nachfrage Ein Bild bewegt sich in einer Endlos...
Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud
Vorwort Wie wir alle wissen, unterstützt das auf ...
Was Sie über Filter in Vue wissen müssen
Inhaltsverzeichnis Vorwort Was ist ein Filter So ...