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, der ursprüngliche Raum bleibt jedoch erhalten und erscheint als leer.

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

Absolut: Absolut positionierte

Elemente werden 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 festgelegt relativ ohne Verschiebung.

behoben: feste Positionierung

Das Element wird aus dem Dokumentfluss entfernt und relativ zum Browserfenster positioniert, sodass es sich beim Scrollen des Dokuments nicht bewegt. 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.

Umfassender Block: Browserfenster.

Vergleich zwischen absolut/fest und float

Ähnlich: Elemente werden aus dem Dokumentenfluss gelöscht, wirken sich aber weiterhin auf das Layout aus; generiert, unabhängig davon, ob es sich ursprünglich um Elemente auf Blockebene handelte.

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

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

Nachdem Sie die Positionspositionierung verwendet haben, müssen Sie das Offset-Attribut verwenden, 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, aber es kann 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: sichtbar/versteckt/scrollen/auto/erben, der Anfangswert ist sichtbar.

Die Größe eines Elements ist festgelegt, aber sein Inhalt passt nicht hinein, 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 legt fest, dass das Element unsichtbar ist, aber das Element wirkt sich trotzdem auf das Layout aus, aber das Element wird in der Anzeige teilweise leer dargestellt: Kein Element wird nicht angezeigt und aus dem Dokument entfernt. Aus dem Flow gelöscht, hat es keine Auswirkung auf das Dokumentlayout.