Verschiedene Möglichkeiten zur Positionierung von CSS und die Unterschiede zwischen ihnen

Beim Front-End-Layout verwenden wir häufig die Positionierung, die über das Positionsattribut erfolgt. Allgemeine Attribute sind wie folgt:

Wert Beschreibung

absolut Erzeugt ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, anders als die statische Positionierung. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
behoben 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 (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).
inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

Zunächst verwenden wir hier das Standard-Box-Modell, daher muss jeder bei der Analyse an eine Box oder einen Rahmen denken. 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 Dokumentenfluss 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 enthaltende Block bezieht sich hier auf das Vorgängerelement (Blockebene oder Inline), dessen letzter Positionswert nicht statisch ist. Im Allgemeinen wird ein Element als umschließender Block des absolut positionierten Elements bezeichnet und seine Position wird auf relativ ohne festgelegt versetzt.

fixed: Feste Positionierung Das
-Element wird aus dem Textfluss gelöst, aus dem normalen Text 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. Enthaltender Block: Browserfenster.

relativ: relative Positionierung. Bei der relativen Positionierung werden am häufigsten folgende verwendet:
Verwendungsmethode 1: Das Element wird um einen bestimmten Abstand relativ zu seiner ursprünglichen Position versetzt, der ursprüngliche Raum 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 einer Box auf Blockebene aus generiert werden, unabhängig davon, ob es sich ursprünglich um ein Element auf Blockebene handelt.
Der Unterschied: Der enthaltende Float-Block ist das nächste Vorgängerelement auf Blockebene.

Offset-Attribute festlegen: oben/rechts/unten/links, der 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. 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, dies kann jedoch im Widerspruch zur Definition des Offset-Attributs stehen, 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/ versteckt/ 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 hineinpasst, führt dies zu einem Überlauf. Überlauf steuert die Sichtbarkeit, Unsichtbarkeit (versteckt) und Scroll-Sichtbarkeit (Scrollen) des Überlaufteils.
Elementsichtbarkeit Sichtbarkeit: sichtbar/versteckt/reduziert/erben, der Anfangswert ist sichtbar.

Das obige ist der detaillierte Inhalt vonVerschiedene Möglichkeiten zur Positionierung von CSS und die Unterschiede zwischen ihnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!