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
So verwenden Sie Dockerfile zum Erstellen von Images in Docker
Erstellen des Images Früher haben wir verschieden...
Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher
Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...
Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue
Vorschau: Code: Seitenabschnitte: <Vorlage>...
Verwenden Sie CSS- und Bootstrap-Symbole, um einen auf und ab springenden Indikatorpfeil-Animationseffekt zu erstellen
Manchmal ist die Seite sehr lang und benötigt ein...
Beschreiben Sie kurz die vier Transaktionsisolationsebenen von MySql
Isolationsstufe: Isolation ist komplizierter als ...
Detaillierte Erklärung des Docker Compose-Orchestrierungstools
Docker Compose Docker Compose ist ein Tool zum De...
Verabschieden Sie sich vom Hard-Coding und lassen Sie Ihre Front-End-Tabelle den Instanzcode automatisch berechnen
Vorwort Als mein Team das Steuersystemmodul entwi...
So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren
Derselbe Server simuliert die Master-Slave-Synchr...
So richten Sie geplante Sicherungsaufgaben in Linux CentOS ein
Implementierungsvorbereitung # Der Dateipfad muss...
Detaillierte Analyse des Problems beim Hinzufügen von Where-Bedingungen mit Left Join in MySQL
Aktuelle Nachfrage: Es gibt zwei Tabellen, Gruppe...
MySQL5.7 Master-Slave-Konfigurationsbeispielanalyse
Implementierungsmethode für die MySQL5.7-Master-S...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...
So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7
1. Laden Sie das MySQL-Installationspaket herunte...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...