Relative Positionierung vs. absolute Positionierung in CSS: Unterschied und Vergleich

Die Welt der CSS stellt uns eine Vielzahl von Geschäftsbedingungen vor. CSS ist eine wichtige Programmiersprache in HTML (eine Auszeichnungssprache).

Es wird von mehreren professionellen Computerexperten und Computeranalytikern betrieben. Zwei Begriffe, relative Positionierung und absolute Positionierung, kommen in der Programmiersprache CSS vor.

Key Take Away

1. Die relative Positionierung verschiebt ein Element relativ zu seiner ursprünglichen Position, ohne das Layout anderer Elemente zu beeinflussen.
2. Die absolute Positionierung entfernt ein Element aus dem Dokumentenfluss und positioniert es relativ zu seinem nächsten positionierten Vorfahren.
3. Die relative Positionierung behält die Position des Elements innerhalb des Dokumentenflusses bei, während die absolute Positionierung andere Elemente überlappen oder stören kann.

Relative Positionierung vs. absolute Positionierung In CSS

Die relative Positionierung bezieht sich auf die Bewegung eines Elements innerhalb eines Dokuments. Das Layout des Dokuments ändert sich durch die relative Positionierung nicht. Die absolute Positionierung bezieht sich auf die Bewegung eines Elements in verschiedenen Dokumenten oder von einem Dokument zum anderen. Das Layout des Dokuments kann in absoluter Positionierung geändert werden.

Relative Positionierung in CSS ist einer der wertvollsten Begriffe (der von Computeranalysten verwendet wird) in der Programmierung.

Es verschiebt ein Element so, dass es relativ zu seiner ursprünglichen Position bleibt. Der Begriff „relativ“ bezieht sich auf etwas, das im Verhältnis zum Ganzen gemessen wird.

Das Layout eines Dokuments wird dadurch nicht geändert. Es verschiebt ein Objekt nach links, rechts, oben und unten.

Die absolute Positionierung in CSS ist ein wertvoller Positionstyp, der Ihnen hilft, ein Element an einer beliebigen Stelle zu platzieren.

Sein Animationstyp ist diskret (ähnlich dem Animationstyp der relativen Position). Der G-Code dieser Position ist G90. Die absolute Position platziert ein Element immer relativ zum übergeordneten Element.

Dieser Positionstyp gilt für benannte Elemente.

Vergleichstabelle

Vergleichsparameter	Relative Positionierung in CSS	Absolute Positionierung in CSS
Funktion	Die relative Positionierung verschiebt ein Element entweder in den linken, rechten, oberen oder unteren Bereich innerhalb eines Dokuments.	Die absolute Positionierung verschiebt ein Element von einem Dokumentenfluss in einen anderen Dokumentenfluss.
Wann zu verwenden	Relative Positionierung wird verwendet, wenn das innere Element einer bestimmten Seite absolut positioniert wird.	Wenn das innere Element eines Seitenelements relativ positioniert wird, wird die absolute Positionierung verwendet.
React Native	Relative Positionierung ist absolut zum übergeordneten Element.	Die absolute Positionierung ist relativ zum übergeordneten Element.
Normaler Dokumentenfluss	Die relative Positionierung hat ein Element im normalen Dokumentenfluss.	Die absolute Positionierung nimmt ein Element aus dem normalen Dokumentenfluss heraus.
Layout	In diesem Fall wird das Layout nicht verändert oder bleibt unverändert.	Bei absoluter Positionierung hat sich das Layout geändert.

Was ist relative Positionierung in CSS?

Die relative Positionierung in CSS ist eine der wertvollsten Positionierungen in der Welt der Programmierung.

Diese Positionierung wird verwendet, wenn ein inneres Element eines bestimmten Elements absolut platziert werden muss.

Bei der relativen Positionierung wird ein Element immer absolut zum übergeordneten Element und relativ zu seiner normalen Position platziert.

In CSS bewirkt die relative Positionierung, dass ein Element entweder nach links, rechts, unten oder oben verschoben wird.

Diese Art der Anordnung könnte dazu führen, dass einige Leerstellen oder Lücken entstehen, die nicht gefüllt werden können. Diese Art der Positionierung verändert das Layout nicht.

Um den Begriff „relative Positionierung“ zu verstehen, müssen einige Details verstanden werden. Einige dieser Details sind unten aufgeführt:

• Animationstyp – Diskret
• Berechneter Wert – Wie angegeben
• Standardwert – Statisch

Durch die relative Positionierung bleibt ein Element innerhalb des normalen Dokuments Fluss. Die normale Position eines Elements bleibt innerhalb des Dokuments, ähnlich wie bei einem statischen Wert. CSS weist dieser Art der Positionierung eine besondere Verantwortung zu.

Durch die relative Positionierung werden mehrere Funktionen erfüllt. Einige dieser Funktionen sind:

• Es hilft, die Position/Position eines Elements zu bestimmen.
• Es hilft, die Position eines Elements innerhalb seiner ursprünglichen Position anzupassen.
• Die relative Positionierung gibt einem die Möglichkeit, innere Elemente (innerhalb eines Seitenelements) zu positionieren.

Was ist absolute Positionierung in CSS?

Die absolute Positionierung in CSS ist ein einzigartiger Positionierungstyp, der das Layout einer Seite ändert.

Dieser Positionierungstyp entfernt ein Element aus dem normalen Dokumentenfluss; Daher werden andere Elemente so positioniert, als ob dieses bestimmte Element nie existiert hätte.

Bei der absoluten Positionierung wird ein Element immer relativ zum übergeordneten Element und absolut zu seiner normalen Position platziert.

In CSS wird die absolute Positionierung verwendet, wenn ein inneres Element einer Seite eines bestimmten Elements relativ platziert werden muss. Für benannte Elemente wird die absolute Positionierung verwendet.

Es funktioniert nicht bei Klassen oder allgemeinen Elementtypen. Das Hauptprinzip dieser Art der Positionierung ist, dass sie jeweils nur an einem Element funktioniert.

Einige Computeranalysten und -spezialisten wissen nicht, wie man ein Element mithilfe der absoluten Positionierung zentriert.

Im Folgenden finden Sie einige Schritte, wie Sie die Zentrierung eines Elements mithilfe dieser Art der Positionierung durchführen:

• Fügen Sie links zu 50℅ des Elements hinzu, das Sie zentrieren möchten.
• Fügen Sie einen negativen linken Rand hinzu, der der halben Breite des Elements entspricht.
• Fügen Sie dann eine Oberseite zu 50℅ des Elements hinzu, das Sie zentrieren möchten.
• Fügen Sie schließlich einen negativen oberen Rand hinzu, der der Hälfte der Breite des Werkzeugs entspricht.

Hauptunterschiede zwischen relativer Positionierung und absoluter Positionierung In CSS

1. Relative Positionierung ist absolut zu seinem Elternteil, während absolute Positionierung relativ zu seinem Elternteil ist.
2. Die relative Positionierung verschiebt ein Element mit einem bestimmten Dokumentlayout, während die absolute Positionierung ein Element von einem Dokument in ein anderes verschiebt.
3. Bei der relativen Positionierung bleibt das Layout gleich, bei der absoluten Positionierung hingegen verändert sich das Layout.
4. Das Element verbleibt relativ zum normalen Dokumentenfluss, während bei der absoluten Positionierung das Element hingegen aus dem normalen Dokumentenfluss herausgenommen wird.
5. Bei einer relativen Positionierung wird das Innenelement relativ positioniert, während bei einer absoluten Positionierung das Innenelement dagegen absolut positioniert wird.

Bibliographie

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

Letzte Aktualisierung: 26. Juli 2023