Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)
|
Das CSS-Positionsattribut gibt den Positionierungstyp des Elements an und verwendet dann oben, unten, links und rechts, um es speziell zu positionieren. Das Positionsattribut muss vor der spezifischen Positionierung verwendet werden, da sonst alle spezifischen Positionierungsattribute nicht wirksam sind. Es gibt fünf mögliche Werte für die Position: statisch, relativ, absolut, fest oder klebrig. Nachfolgend erläutert der Blogger den Vergleich der Codes und die Laufergebnisse nacheinander Erstens ist das Positionsattribut nicht festgelegt. Sie können sehen, dass das Top-Attribut der beiden Elemente nicht wirksam ist, während das Farbattribut wirksam ist. Die aktuelle Position ist die Position im Standarddokumentenfluss. Dies wird als Prototyp verwendet, um die Änderungen der Elementposition zu vergleichen, wenn die Position geändert wird.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<link rel="stylesheet" href="./j.css">
</Kopf>
<Text>
<div class="box" id="one">Eins</div>
<div class="box" id="two">Zwei</div>
<div class="box" id="three">Drei</div>
<div class="box" id="four">Vier</div>
</div>
</body>
</html>
.Kasten {
Anzeige: Inline-Block;
Hintergrund: rot;
Farbe: weiß;
}
#zwei {
oben: 260px;
unten: 126px;
links: 20px;
Hintergrund: blau;
}
Position: statisch Fügen Sie position: static; wie folgt zur Klasse #two hinzu (an jeder nachfolgenden Stelle wird nur der Positionswert geändert)
#zwei {
Position: statisch;
oben: 260px;
unten: 126px;
links: 20px;
Hintergrund: blau;
}
Der Standardwert für ein HTML-Element ist, dass es keine Positionierung hat und im normalen Fluss erscheint. Oben, unten, links oder rechts haben keine Auswirkungen auf statisch positionierte Elemente. Da dieser Wert das Positionierungsattribut ungültig macht, welchen Sinn hat seine Existenz? Während Sie den Stil einer Webseite ändern, können Sie die Positionsinformationen bestimmter Elemente vorübergehend blockieren oder die Positionsinformationen bestimmter Teile während der Änderung beibehalten, um die Wiederherstellung zu erleichtern. Position: relativ Relative Positionierung ist die Positionierung relativ zum ursprünglichen normalen Dokumentfluss, aber das ursprüngliche Seitenlayout wird während der Positionierung nicht geändert. Dies entspricht dem bloßen Verschieben des positionierten Elements, und die verschobene Vergleichsstandardposition ist die Position im normalen Dokumentfluss, und die ursprüngliche Position bleibt leer.
Position: absolut Bei der absoluten Positionierung wird das Element aus dem normalen Dokumentfluss entfernt und schafft keinen Platz für Elemente im Seitenlayout. Die Position erfolgt relativ zum zuletzt positionierten übergeordneten Element. In diesem Beispiel basiert die Positionierung auf dem Body-Element.
Position: fest Die feste Positionierung ähnelt der absoluten Positionierung darin, dass sie aus dem normalen Dokumentfluss gelöscht wird und keinen Platz für Elemente im Seitenlayout schafft. Der Unterschied besteht darin, dass sie am Ansichtsfenster fixiert ist und basierend auf dem Ansichtsfenster positioniert wird. Ich glaube, jeder hat diese Erfahrung beim Durchsuchen vieler Webseiten gemacht. Oben oder unten auf der Webseite befinden sich Anzeigen, die sich beim Scrollen der Webseite nicht bewegen. Sie sind auf der Webseite fixiert und überdecken den Inhalt der Webseite, wenn der Z-Index nicht so eingestellt ist, dass die Stapelreihenfolge geändert wird.
Position: klebrig Das Element verlässt den Dokumentenfluss nicht und behält weiterhin seine ursprüngliche Position im Dokumentenfluss. Wenn das Element über den angegebenen Offsetwert im Container hinaus gescrollt wird, wird das Element an der angegebenen Position im Container fixiert. Das heißt, wenn Sie oben 20 Pixel festlegen, wird das klebrige Element fixiert und bewegt sich nicht mehr nach oben, wenn es eine Position 50 Pixel vom oberen Rand des relativ positionierten Elements erreicht. Der feste relative Versatz eines Elements ist relativ zum übergeordneten Element mit dem ihm am nächsten gelegenen Bildlauffeld. Wenn das übergeordnete Element nicht gescrollt werden kann, wird der Versatz des Elements relativ zum Ansichtsfenster berechnet.
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. |
<<: Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode
>>: Anfänger lernen einige HTML-Tags (3)
Artikel empfehlen
CSS-Methode zum Löschen von Float und BFC
BFC BFC: Blockformatierungskontext BFC-Layoutrege...
Einfache Zusammenfassung der Methoden zur Leistungsoptimierung von Tomcat
Tomcat selbst optimieren Tomcat-Speicheroptimieru...
JavaScript-Grundlagen: Funktion zur sofortigen Ausführung
Inhaltsverzeichnis Funktionsformat sofort ausführ...
Beispiel zum Erstellen eines MySQL-Clusters mit Docker
Grundlegende Anweisungen für Docker: Update-Paket...
Zusammenfassung der Unterschiede zwischen SQL und NoSQL
Hauptunterschiede: 1. Typ SQL-Datenbanken werden ...
Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion
Inhaltsverzeichnis 1. Einleitung 2. Implementieru...
Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
1. Elemente und Tags in HTML <br />Ein Elem...
Schritte zum Exportieren der Felder und zugehörigen Attribute von MySQL-Tabellen
Müssen die Felder und Eigenschaften der Tabelle i...
Detaillierte Erklärung zum Hinzufügen eines Klickereignisses im Echarts-Tooltip in Vue
Inhaltsverzeichnis brauchen Problemumgehung 1. To...
Das Vue-Projekt implementiert einen grafischen Überprüfungscode
In diesem Artikelbeispiel wird der spezifische Co...
Erste Schritte mit GDB unter Linux
Vorwort gdb ist ein sehr nützliches Debugging-Too...
100-1% des Inhalts der Website ist Navigation
Website, (100-1)% des Inhalts ist Navigation 1. J...
Detaillierte Beschreibung der Funktion von new in JS
Inhaltsverzeichnis 1. Beispiel 2. Erstelle 100 So...
Das Vue-Projekt implementiert eine Fortschrittsbalkenfunktion für den Dateidownload
Im täglichen Geschäftsleben gibt es zwei gängige ...
Erweitert und Zusammenfassung häufig verwendeter SQL-Anweisungen in MySQL-Datenbanken
Dieser Artikel beschreibt anhand von Beispielen d...