Erklären Sie die verschiedenen CSS -Positionierungsschemata: statisch, relativ, absolut, fest, klebrig

Es gibt fünf Arten von CSS -Positionierungsmethoden: statisch, relativ, absolut, fest und klebrig. Statisch ist die Standardpositionierung, die dem Dokumentenfluss folgt, und unterstützt keinen Offset. Relative bewegt sich relativ zu seiner ursprünglichen Position und befindet sich noch im Dokumentfluss; Das Absolute wird vom Dokumentfluss getrennt und relativ zur nächstgelegenen Positionierung der nicht statischen Positionierung positioniert. relativ zum Browserfenster festgelegt und wird häufig verwendet, um die Navigationsleiste zu reparieren. Sticky liegt zwischen relativ und fest und scrollen zu einer bestimmten Position und fixiert, geeignet für klebrige Köpfe. Die Beherrschung ihrer Verhaltensunterschiede ist der Schlüssel zum Layout.

Die Positionierung von CSS ist eigentlich nicht so schwierig, aber viele Menschen neigen zu Beginn zu Verwirrung. Einfach ausgedrückt, die Positionierung besteht darin, zu steuern, wo das Element "bleibt" auf der Seite. Es gibt fünf häufig verwendete Positionierungsmethoden: static , relative , absolute , fixed und sticky . Ihre Verhaltensweisen variieren stark. Wenn Sie das falsche verwenden, ist das Layout möglicherweise unordentlich.

Im Folgenden werde ich über ihre Unterschiede und darüber sprechen, wie man sie aus den Perspektiven von Szenarien und Verhaltensmerkmalen nutzt.

Statische Positionierung: Die Standardpositionierungsmethode

Wenn Sie das position nicht schreiben, ist das Element static Positionierung. Es soll ehrlich nach dem Dokumentfluss von oben nach unten und von links nach rechts angeordnet werden und wird nicht von Attributen wie top , bottom , left und right beeinflusst.

• Geeignet für die meisten Elemente, die keine besondere Kontrolle erfordern
• Nicht aus dem Dokumentenfluss
• Offset -Einstellungen werden nicht unterstützt (es ist nutzlos, wenn Sie top: 20px schreiben)

Wenn Sie also nicht besonders das Layoutverhalten ändern möchten, müssen Sie es im Allgemeinen nicht verschieben.

Relative Positionierung: Bewegen Sie sich relativ zu Ihrer ursprünglichen Position

Diese Positionierungsmethode ist sehr häufig, insbesondere wenn Sie die Position eines Elements fein abstellen möchten. Es befindet sich noch im Dokumentstrom, aber Sie können top , bottom , left und right es verwenden, um ihn leicht zu verschieben, und die Richtung der Verschiebung ist relativ zu seiner ursprünglichen Position.

Zum Beispiel:

 .Kasten {
  Position: Relativ;
  Top: 10px;
  links: 20px;
}

Auf diese Weise wird .box von seiner ursprünglichen Position und 20px nach rechts nach unten bewegt, aber seine ursprüngliche Position ist immer noch leer und wirkt sich nicht auf das Layout anderer Elemente aus.

Gemeinsame Verwendungen:

• Kleine Anpassungen vornehmen
• Verwenden Sie mit absolute Kinderelementen (ich werde später darüber sprechen)

Absolute Positionierung: vom Dokumentfluss abgelöst, relativ zur nächsten Positionierung der Vorfahren

absolute ist ein "liberaler", der völlig aus dem Dokumentstrom herauskommt, und sein Standort wird durch die neuesten Vorfahren bestimmt, die eine nicht static Positionierung festgelegt haben. Wenn nicht, suchen Sie weiter, bis das Ansichtsfenster (Browserfenster) gefunden wurde.

Zum Beispiel:

 .PARENT {
  Position: Relativ;
}

.Kind {
  Position: absolut;
  Top: 0;
  links: 0;
}

Auf diese Weise wird .child in der oberen linken Ecke von .parent , nicht in der oberen linken Ecke der gesamten Seite positioniert.

Schlüsselpunkte:

• Es wird vom Dokumentstrom getrennt, und andere Elemente werden so sein, wie es nicht existiert
• static
• Häufig für Popup-Fenster, Dropdown-Menüs, Symbolüberlagerungen usw. verwendet.

Fixe Positionierung: Relativ zum Browserfenster festgelegt

Die fixed Positionierung ist absolute sehr ähnlich, beruht jedoch nicht auf Ankunftselemente, sondern befindet sich direkt zum Browserfenster. Auch wenn die Seite scrolliert, "klebt" sie immer in dieser Position.

Wenn beispielsweise die Navigationsleiste oben oder die schwimmende Taste in der unteren rechten Ecke festgelegt ist, wird sie häufig verwendet.

 .navbar {
  Position: fest;
  Top: 0;
  Breite: 100%;
}

Beachten:

• Lassen Sie den Dokumentfluss fließen
• Bewegen Sie sich nicht mit der Seite "Scrollen"
• UI -Elemente, die für feste Positionen geeignet sind

Stickige Positionierung: zwischen relativ und fest

Dies ist eine relativ neue Positionierungsmethode, aber sie ist einfach zu bedienen. Es ist wie eine Kombination der beiden: Es wirkt wie in einem bestimmten Bereich relative und wenn es über diesen Bereich hinausgeht, wird es fixed .

Am häufigsten ist es, "klebrige" Navigationsleiste oder feste Spaltenscheiben von Tabellen zu machen.

 .Header {
  Position: klebrig;
  Top: 0;
}

Auf diese Weise wird die Seite, wenn die Seite zur Position .header scrolliert, ohne sich zu bewegen.

Notiz:

• Muss mit top , bottom , left oder right verwendet werden, sonst hat es keine Wirkung
• Nicht aus dem Dokumentenfluss
• Der übergeordnete Container kann keinen overflow: hidden oder transform , sonst fehlschlägt er

Grundsätzlich ist das. Obwohl es nicht viele Positionierungsmethoden gibt, können sie beim Kombinieren verschiedene komplexe Layouts erstellen. Der Schlüssel besteht darin, die Verhaltensmerkmale jeder Methode und die Unterschiede zwischen ihnen zu verstehen. Wenn Sie beispielsweise aus dem Dokumentstrom aussteigen und sich auf das übergeordnete Element verlassen müssen, sind diese Details klar und Sie werden bei der Verwendung keine Fehler machen.

Das obige ist der detaillierte Inhalt vonErklären Sie die verschiedenen CSS -Positionierungsschemata: statisch, relativ, absolut, fest, klebrig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!