Unterschied zwischen statischer und relativer Positionierung

Was ist in CSS der Unterschied zwischen statischer (Standard-) Positionierung und relativer Positionierung?

Die statische Positionierung ist das Standardpositionierungsmodell für Elemente. Sie werden auf der Seite angezeigt, auf der sie als Teil des normalen HTML-Flusses gerendert wurden. Statisch positionierten Elemente nicht gehorchen left, top, rightund bottomRegeln:

Mit der relativen Positionierung können Sie einen bestimmten Versatz ( usw.) angeben left, topder relativ zur normalen Position des Elements im HTML-Fluss ist. Wenn ich also ein Textfeld in einem Textfeld habe, kann divich eine relative Positionierung auf das Textfeld anwenden, damit es an einer bestimmten Stelle relativ zu der Stelle angezeigt wird, an der es normalerweise in der folgenden Position platziert wird div:

Es gibt auch eine absolute Positionierung - wobei Sie die genaue Position des Elements relativ zum gesamten Dokument oder das nächste relativ positionierte Element weiter oben im Elementbaum angeben :

Und wenn a position: relativeauf ein übergeordnetes Element in der Hierarchie angewendet wird:

Beachten Sie, wie unser Element mit der absoluten Position durch das relativ positionierte Element gebunden ist.

Und schließlich ist da behoben. Durch die feste Positionierung wird ein Element auf eine bestimmte Position im Ansichtsfenster beschränkt, die während des Bildlaufs an Ort und Stelle bleibt:

Sie können auch das Verhalten beobachten, dass fest positionierte Elemente keinen Bildlauf verursachen, da sie nicht als an das Ansichtsfenster gebunden betrachtet werden:

Während absolut positionierte Elemente immer noch an das Ansichtsfenster gebunden sind und einen Bildlauf verursachen:

..wenn Ihr übergeordnetes Element nicht verwendet overflow: ?, um das Verhalten der Schriftrolle zu bestimmen (falls vorhanden).

Bei absoluter Positionierung und fester Positionierung werden die Elemente aus dem HTML-Fluss entfernt.

Eine einfache Übersicht sehen Sie hier: W3School

Wenn ich mich richtig erinnere, bleibt ein deklariertes Element standardmäßig an der gleichen Stelle, wie es sonst sollte, aber Sie erhalten die Möglichkeit, Elemente darin relativ zu diesem Element absolut zu positionieren, was ich als sehr nützlich empfunden habe in der Vergangenheit.

Als Antwort auf "Warum CSS noch Position implementieren würde: statisch;" In einem Szenario begrenzt die Verwendung von Position: Relativ für einen Elternteil und Position: Absolut für das Kind die Skalierungsbreite des Kindes. In einem horizontalen Menüsystem, in dem Sie möglicherweise 'Spalten' von Links haben, funktioniert die Verwendung von 'width: auto' nicht mit relativen Eltern. In diesem Fall kann die Breite je nach Inhalt variabel sein, wenn Sie sie in "statisch" ändern.

Ich habe mich ein paar Stunden lang gefragt, warum ich meinen Container nicht an die Menge des darin enthaltenen Inhalts anpassen konnte. Hoffe das hilft!

Mit Position relativ können Sie oben / unten / links / rechts für die Positionierung verwenden. Mit Static können Sie dies nur tun, wenn Sie Randparameter verwenden. Es gibt einen Unterschied zwischen oben und oben.

Sie müssen nicht viel statisch verwenden, da dies die Standardeinstellung ist

Die relative Position ist relativ zum normalen Durchfluss. Die relative Position dieses Elements (mit Offsets) ist relativ zu der Position, an der dieses Element normalerweise gewesen wäre, wenn es nicht verschoben worden wäre.

Matthew Abbott hat eine wirklich gute Antwort.

Absolut und relativ positionierter Elemente gehorchen top, left, rightund bottomBefehle (Offsets) in dem statischen positionierten Elemente nicht.

Relativ positionierte Elemente verschieben Offsets von der Stelle, an der sie sich normalerweise im HTML befinden.

Absolut positionierte Elemente verschieben Offsets aus dem Dokument oder dem nächsten relativ positionierten Element im DOM-Baum.

Statisch: Ein STATISCH positioniertes Element erhalten wir durch DEFAULT (Normale Positionierung von Objekten).

Relativ: Relativ zur aktuellen Position, kann aber verschoben werden. Oder Ein RELATIV positioniertes Element wird relativ zu SELBST positioniert.

statisch und relativ sind Positionsattribute. Relativ wird für viele Zwecke verwendet. Nicht für einen. Beachten Sie jedoch, dass statische und relative Daten den normalen Dokumentfluss des HTML-Codes nicht beeinträchtigen. statisch ist die Standardposition, die beim Schreiben eines Elements in HTML festgelegt wird. Wenn ein Element eine relative Position hat, kann dieses Element relativ zu seiner ursprünglichen Position positioniert werden. Wenn Sie das Element aus kleinen Räumen anpassen möchten, verwenden Sie die relative Position, damit Sie den Rand, den Abstand usw. nicht hinzufügen müssen, wenn das Element eine relative Position und ein untergeordnetes Element hat. Hier können wir Messungen relativ zu seinem Elternteil durchführen. Wenn Sie dem untergeordneten Element eine Breite von 10% hinzufügen, bedeutet dies (Breite + Auffüllung) x10%. Wenn Sie jedoch das relative Schlüsselwort nicht hinzufügen, erhalten Sie eine Breite von 10%. Davon abgesehen ist die wichtigste Verwendung des Verwandten; Sie können jedes Element darüber positionieren.