Unterschied zwischen statischer und relativer Positionierung

87

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

— jrdioko
quelle

20

Ein Unterschied ist, dass Sie häufig tippen position: relativeund nie tippen position: static:)

— dreißig Punkte

166

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:

statisch positionierte Elemente gehorchen dem normalen HTML-Fluss.

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:

Relativ positionierte Elemente gehorchen dem HTML-Fluss, bieten jedoch die Möglichkeit, ihre Position relativ zu ihrer normalen Position im HTML-Fluss anzupassen.

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 :

Absolut positionierte Elemente werden aus dem HTML-Fluss entfernt und können an einer bestimmten Stelle im Dokument positioniert werden ...

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

... oder relativ zum ersten übergeordneten Element im HTML-Baum positioniert, das relativ positioniert ist.

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:

Elemente mit fester Position werden ebenfalls aus dem HTML-Fluss entfernt, sind jedoch nicht an das Ansichtsfenster gebunden und scrollen nicht mit der Seite.

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

fest positionierte Elemente haben keinen Einfluss auf den Bildlauf.

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

Absolut positionierte Elemente sind weiterhin von den Grenzen des Ansichtsfensters betroffen, es sei denn, für ein übergeordnetes Element wird ein Überlauf verwendet.

..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.

— Matthew Abbott
quelle

4

Gute Antwort, aber (für die relative Position) basiert der Versatz nicht auf der normalen Position des Elements?

— Baztoune

4

Ich stimme Baztoune zu, diese Definition für relativ positionierte Elemente ist irreführend. A staticund relativeElement sind identisch, außer dass Sie es mit letzterem relativ zu seiner ursprünglichen Position neu positionieren können , nicht zum enthaltenden Element - hier absolutekommt es ins Spiel. Ebenso wie bei jedem Element, das mit einem anderen Wert positioniert wird, als staticSie verwenden können z-index.

— Ryan Williams

Ich habe diese Antwort überarbeitet, um die relative Positionierung genauer zu definieren, und Bilder eingefügt, um die verschiedenen Positionstypen zu demonstrieren.

— Matthew Abbott

3

Ich frage mich, warum CSS immer noch implementiert wird, position: static;anstatt es position: relative;standardmäßig zu ersetzen . Wenn man keinen anderen Gegenstand als positionieren will top: 0;und left: 0;dann lass es uns nicht tun, oder? Gibt es einen Grund, warum position: static;dies im Rahmen von CSS weiterhin erforderlich ist?

— Cram2208

8

@ cram2208 Da relativ dazu führt, dass untergeordnete Knoten absolut positioniert werden, können statisch absolut positionierte untergeordnete Knoten ihre Position ignorieren und relativ zum nächsten relativ positionierten Element positioniert werden. Es ist ein wichtiges Konzept zu haben

— Felype

7

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.

— Stoffe
quelle

29

w3schools ... Ich werde das nicht ablehnen, aber du musst mit der Schande leben.

— Myles Gray

4

In der Zwischenzeit, im Jahr 2017, sind W3Schools nicht mehr so schlecht wie früher (es ist immer noch nicht perfekt, aber sie haben die Community-Gegenreaktion ernst genommen und sich tatsächlich verbessert).

— Priidu Neemre

In der Zwischenzeit, im Jahr 2018, ist W3Schools immer noch nicht mehr so schlecht wie früher, aber sie fühlen sich schlecht für sie, dass ihr Ruf auch heute noch so ist, dass die Erwähnung des obigen ersten Kommentars gegenüber anderen Entwicklern immer noch ein klassisches Kichern bekommt ... zurück zu meiner Zeit ... W3School .... erste Eindrücke hey ...

— redfox05

7

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!

— user3233352
quelle

Das ist die Antwort! Jeder sagt den Profis nur die relative Positionierung und verpasst den Punkt in einer Frage wie dieser: Was ist der Unterschied?

— Bartis Áron

5

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

— frontsideup
quelle

2

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.

— AvadhootKulkarni
quelle

2

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.

— Connor Leech
quelle

0

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.

— Arif
quelle

0

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.

— Lakruwan Pathirage
quelle