Mehrere Möglichkeiten zur Positionierung in Front-End-Projekten

Wir wissen, dass wir in Front-End-Projekten über das Positionierungsattribut Position positionieren. Welche spezifischen Attributwerte hat es also? Was sind die gängigen Positionierungsmethoden? Lassen Sie mich es heute für Sie zusammenfassen.

Wertbeschreibung

absolut Erzeugt ein Element mit absoluter Positionierung, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert wird. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fixed Erzeugt absolut positionierte Elemente, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

relativ Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

statischer Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder z-index-Deklarationen werden ignoriert).

inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

Zuallererst verwenden wir hier das Standard-Box-Modell, sodass jeder es bei der Analyse als Box oder Rahmen behandeln muss. Lassen Sie uns zunächst etwas über den ersten Standardparameter static lernen.

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

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.

Der umschließende Block bezieht sich hier auf das Vorgängerelement (Blockebene oder Inline), dessen aktueller Positionswert nicht statisch ist. Im Allgemeinen wird ein Element als umschließender Block des absolut positionierten Elements bezeichnet und seine Position festgelegt relativ und es gibt keinen Offset.

behoben: Feste Positionierung

Elemente werden aus dem Textfluss gelöst, aus dem normalen Text entfernt und relativ zum Browserfenster positioniert, sodass sie sich beim Scrollen des Dokuments nicht bewegen. 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.

relativ: Relative Positionierung

Relative Positionierung, die gebräuchlichsten Verwendungsmöglichkeiten sind wie folgt:

Verwendungsmethode 1: Das Element wird um einen bestimmten Abstand relativ zu verschoben Die ursprüngliche Position bleibt erhalten, der ursprüngliche Platz bleibt jedoch erhalten und erscheint leer.

Verwendungsmethode zwei: Stellen Sie ein Element auf position: relative; ein, um die untergeordneten Elemente des Elements absolut relativ zum Element zu positionieren.

Vergleich zwischen absolut/fest und float

Das Gleiche: Die Elemente werden aus dem Textfluss getrennt und aus dem normalen Text gelöscht, aber es wirkt sich immer noch auf das Layout aus; Das Level-Feld wird generiert, unabhängig vom Original. Kein Block-Level-Element.

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

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

Nachdem die Positionierung verwendet wurde, muss das Offset-Attribut verwendet werden, um den Offset zu definieren, der der Offset relativ zum enthaltenden Block ist. Bei der Verwendung müssen Sie darauf achten, dass das Element, das den Versatz definiert, ein Element sein sollte, dessen 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.

Eine weitere Eigenschaft in CSS. Dann Inhaltsüberlauf: Überlauf.

Normalerweise hat das Inhaltsüberlaufattribut die folgenden Werte:

Überlauf: sichtbar/ ausgeblendet/ scrollen / automatisch/ erben

Der Anfangswert des Überlaufs ist sichtbar.

Überlauf verwenden wir häufig: Wenn die Größe eines Elements festgelegt ist, sein Inhalt jedoch nicht passt, führt dies zu einem Überlauf. Überlauf steuert die Sichtbarkeit, Unsichtbarkeit und Scroll-Sichtbarkeit des Überlaufteils.

ElementsichtbarkeitSichtbarkeit: sichtbar/verborgen/kollabieren/erben, der Anfangswert ist sichtbar.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zum Anpassen der Div-Breite

So ändern Sie den Mouseover-Stil ohne Verwendung von CSS

So optimieren Sie HTML-Webseiten

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten zur Positionierung in Front-End-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!