Der Unterschied zwischen verschiedenen CSS-Positionierungsmethoden

Statisch: Die statische Positionierung ist der Standardwert der Position. Das Elementfeld wird normal generiert, dh es wird normal ohne Positionierung angezeigt.

relativ: relative Positionierung

Verwendung 1: Das Element wird um einen bestimmten Abstand relativ zu seiner ursprünglichen Position versetzt , aber der ursprüngliche Platz bleibt erhalten und erscheint leer.

Verwendung 2: Setzen Sie ein Element auf position: relative; um die untergeordneten Elemente des Elements absolut relativ zum Element zu positionieren.

Absolut: Absolute Positionierung

Das Element wird aus dem Dokumentfluss entfernt und relativ zum enthaltenden Block positioniert. Das Element ist in seinem ursprünglichen Raum geschlossen. Nach der Positionierung des Elements wird eine Box auf Blockebene generiert, unabhängig davon, ob es ursprünglich ein Inline-Element oder ein Element auf Blockebene war.

Umschließender Block: Der nächstgelegene Positionswert ist kein statisches Vorgängerelement (Blockebene oder Inline). Im Allgemeinen wird ein Element als umschließender Block des absolut positionierten Elements bezeichnet und seine Position ist auf relativ gesetzt und hat keinen Versatz.

Fixed: feste Positionierung

Das Element wird aus dem Dokumentenfluss entfernt und relativ zum Browserfenster positioniert, Es folgt also nicht. Das Dokument bewegt sich beim Scrollen. Das Element ist in seinem ursprünglichen Raum geschlossen. Nach der Positionierung des Elements wird eine Box auf Blockebene generiert, unabhängig davon, ob es ursprünglich ein Inline-Element oder ein Element auf Blockebene war. Der einzige Unterschied zur absoluten Positionierung ist der enthaltende Block.

Enthält Block: Browserfenster.

Vergleich zwischen absolut/fest und Float

Ähnlich: Elemente werden aus dem Dokumentenfluss gelöscht, aber es wirkt sich weiterhin auf das Layout aus; es wird ein Feld auf Blockebene generiert, unabhängig davon, ob es sich um ein Element auf Blockebene handelt oder nicht.

Unterschied: Der enthaltende Float-Block ist das nächstgelegene Vorgängerelement auf Blockebene.

Offset-Attribut: oben/rechts/unten/links, der Anfangswert ist automatisch.

Nach der Verwendung der Positionspositionierung muss das Offset-Attribut verwendet werden, um den Offset zu definieren, der der Offset relativ zum enthaltenden Block ist. Beachten Sie, dass dies für Elemente gilt, deren Positionswert nicht statisch ist.

Manchmal ist es auch notwendig, Breite und Höhe zu definieren, es kann jedoch zu Konflikten mit der Definition des Offset-Attributs kommen, da die vier Offset-Attribute tatsächlich die Größe des Elements definieren . Zu diesem Zeitpunkt werden links und rechts gemäß den Attributen „Breite“ und „Links“ definiert, und oben und unten werden gemäß den Attributen „Oben“ und „Höhe“ definiert.

Inhaltsüberlaufüberlauf: sichtbar/versteckt/scrollen/auto/erben, der Anfangswert ist sichtbar.

Die Größe eines Elements ist festgelegt, aber sein Inhalt passt nicht, was zu einem Überlauf führt. Überlauf steuert die Sichtbarkeit, Unsichtbarkeit (versteckt) und Scroll-Sichtbarkeit (Scrollen) des Überlaufteils.

　Elementsichtbarkeit Sichtbarkeit: sichtbar/versteckt/reduziert/erben, der Anfangswert ist sichtbar.

Der Unterschied zwischen Visibility:hidden und Display:none: Visibility:hidden setzt das Element auf unsichtbar, das Element wirkt sich jedoch weiterhin auf das Layout aus, das Element ist jedoch teilweise unsichtbar leer gerendert; display:none Das Element wird nicht angezeigt und aus dem Dokumentfluss entfernt, ohne dass dies Auswirkungen auf das Dokumentlayout hat.