Umfassender Leitfaden für CSS-Positionierung und Eigenschaften

2. November 2023

Umfassender Leitfaden für CSS-Positionierung und Eigenschaften

Umfassender Leitfaden für CSS-Positionierung und Eigenschaften: Alles, was Sie wissen müssen

position: absolute;
position: fixed;
position: relative;
position: static;
position: sticky;
position: inherit;
position: initial;
position: revert;
position: unset;

position: absolute;

„position: absolute;“ ist eine CSS-Eigenschaft, die verwendet wird, um das Positionierungsschema eines Elements auf einer Webseite zu definieren. Wenn ein Element auf „position: absolute;“ gesetzt ist, wird es relativ zum nächstgelegenen übergeordneten Element mit einer positionierten (d.h. nicht „static“) Position platziert. Wenn kein solches Element vorhanden ist, wird das Element relativ zum Dokument selbst positioniert.

Hier sind die wichtigsten Merkmale und Verwendungen von „position: absolute;“:

Freie Positionierung: Im Gegensatz zu „position: relative;“ und „position: fixed;“, bei denen das Element im normalen Dokumentenfluss bleibt, wird ein Element mit „position: absolute;“ aus dem normalen Fluss genommen und kann an eine spezifische Stelle auf der Seite platziert werden.
Relativität zur nächsten positionierten Eltern: Wenn das übergeordnete Element, das positioniert ist, nicht vorhanden ist, wird das Element relativ zum Dokument positioniert.
Kein Platz reserviert: Elemente mit „position: absolute;“ reservieren keinen Platz für sich selbst im normalen Dokumentenfluss. Dies kann zu Überlappungen mit anderen Elementen führen, wenn nicht sorgfältig darauf geachtet wird.
Verwendung für Überlagerungen: „position: absolute;“ wird oft verwendet, um Elemente zu überlagern, beispielsweise für Pop-ups, Modale, Tooltips und ähnliche Elemente, die über anderen Inhalten schweben müssen.
Koordinatenbasierte Platzierung: Sie können die Position des Elements mithilfe der Eigenschaften „top“, „bottom“, „left“ und „right“ in Bezug auf das übergeordnete positionierte Element oder das Dokument selbst genau steuern.
Z-Index-Verwaltung: Mit „position: absolute;“ können Sie auch den z-Index eines Elements steuern, um die Reihenfolge der Elemente zu ändern, die überlagert werden.

Es ist wichtig zu beachten, dass die Verwendung von „position: absolute;“ mit Vorsicht erfolgen sollte, da falsche Anwendung zu unerwünschten visuellen Effekten und Schwierigkeiten bei der Aufrechterhaltung des Layouts führen kann. Sie sollten es nur verwenden, wenn Sie eine genaue Kontrolle über die Positionierung eines Elements benötigen und sich der Auswirkungen auf das Layout bewusst sind.

position: fixed

Die CSS-Eigenschaft „position: fixed;“ wird verwendet, um ein Element relativ zum Browserfenster zu positionieren, unabhängig davon, wie weit der Benutzer auf der Seite nach unten gescrollt hat. Hier sind die detaillierten Informationen zu „position: fixed;“:

Festpositionierung: Ein Element mit „position: fixed;“ bleibt an einer festen Position im Browserfenster, auch wenn der Benutzer auf der Seite scrollt. Es bewegt sich nicht mit dem Rest des Dokuments.
Keine Platzreservierung: Elemente mit „position: fixed;“ reservieren keinen Platz im normalen Dokumentenfluss. Dadurch können sie über anderen Inhalten schweben und den Text oder andere Elemente überlagern.
Verwendung für Kopf- und Fußzeilen: „position: fixed;“ wird häufig verwendet, um Kopf- und Fußzeilen auf Websites zu erstellen, die beim Scrollen sichtbar bleiben sollen.
Einfache Implementierung von Anzeigen: Anzeigen und Benachrichtigungen können mithilfe von „position: fixed;“ am oberen oder unteren Rand des Browserfensters platziert werden, um eine bessere Sichtbarkeit zu gewährleisten.
Koordinatenbasierte Platzierung: Sie können die Position des Elements genau steuern, indem Sie Werte für „top“, „bottom“, „left“ und „right“ festlegen, um den Abstand des Elements vom oberen, unteren, linken oder rechten Rand des Browserfensters anzugeben.
Z-Index-Verwaltung: Ähnlich wie bei „position: absolute;“ kann „position: fixed;“ verwendet werden, um den z-Index des Elements zu steuern und sicherzustellen, dass es über anderen Elementen angezeigt wird.

Es ist wichtig zu beachten, dass „position: fixed;“ oft in responsiven Designs vorsichtig eingesetzt werden sollte, um sicherzustellen, dass die Elemente auf verschiedenen Bildschirmgrößen gut funktionieren. Außerdem kann die Verwendung von „position: fixed;“ die Benutzererfahrung beeinträchtigen, wenn sie nicht sorgfältig eingesetzt wird, da sie Teile des Inhalts verdecken kann, insbesondere auf kleineren Bildschirmen.

position: relative

Die CSS-Eigenschaft „position: relative;“ wird verwendet, um die Position eines Elements relativ zu seiner normalen Position im Dokument zu verschieben. Hier sind die Details zu „position: relative;“:

Verschiebung im Dokumentenfluss: Ein Element mit „position: relative;“ behält seine ursprüngliche Position im normalen Dokumentenfluss bei, auch wenn es relativ zu dieser Position verschoben wird.
Keine Überlagerung: Im Gegensatz zu „position: absolute;“ und „position: fixed;“, die dazu führen können, dass Elemente über andere Elemente überlagert werden, führt „position: relative;“ nicht automatisch zu Überlagerungen, es sei denn, dies wird explizit durch andere Eigenschaften festgelegt.
Koordinatenbasierte Verschiebung: Sie können die Position des Elements mithilfe der Eigenschaften „top“, „bottom“, „left“ und „right“ relativ zu seiner ursprünglichen Position im normalen Fluss genau steuern.
Referenzpunkt für absolute Positionierung: Wenn ein Element mit „position: relative;“ das übergeordnete Element für ein anderes Element mit „position: absolute;“ ist, wird das absolute Element relativ zum relativen Element positioniert.
Anpassungen im Layout: „position: relative;“ kann verwendet werden, um feine Anpassungen im Layout vorzunehmen, wenn Sie die genaue Position eines Elements relativ zu seiner normalen Position ändern möchten, ohne den Fluss des restlichen Layouts zu stören.
Einfluss auf Kinderelemente: Wenn ein Element mit „position: relative;“ verschoben wird, werden seine Kinderelemente relativ zu dieser neuen Position positioniert, sofern sie nicht durch andere Positionierungseigenschaften beeinflusst werden.

„Position: relative;“ wird normalerweise verwendet, um kleine Anpassungen an der Position von Elementen vorzunehmen, ohne den normalen Fluss des Dokuments zu unterbrechen. Es ist besonders nützlich, wenn Sie fein abgestimmte Anpassungen im Layout vornehmen möchten, die sich nicht stark auf die gesamte Seitenstruktur auswirken.

position: static

Die CSS-Eigenschaft „position: static;“ ist die Standardeinstellung für alle HTML-Elemente und bedeutet, dass sich das Element im normalen Dokumentenfluss befindet. Hier sind die Details zu „position: static;“:

Normales Fließen: Ein Element mit „position: static;“ folgt dem normalen Fluss des Dokuments und wird an der Position angezeigt, die im HTML-Code spezifiziert ist.
Keine Koordinatensteuerung: Im Gegensatz zu anderen Positionierungswerten wie „absolute“, „relative“ oder „fixed“ können Sie die Position eines Elements mit „position: static;“ nicht mithilfe von Koordinaten (z. B. top, bottom, left, right) genau steuern.
Keine Überlagerung: Elemente mit „position: static;“ überlagern sich nicht automatisch mit anderen Elementen, sondern werden gemäß ihrer Position im HTML-Dokument angezeigt.
Standardpositionierung: Da „position: static;“ der Standardwert ist, müssen Sie diese Positionseigenschaft normalerweise nicht explizit festlegen, es sei denn, Sie möchten sicherstellen, dass das Element seine standardmäßige Positionierung beibehält, auch wenn andere Positionierungseigenschaften in CSS festgelegt werden.
Einsatz in der Standardlayoutstruktur: „position: static;“ wird in der Regel für Elemente verwendet, bei denen keine besondere Positionierung erforderlich ist, und die im normalen Fluss des Layouts angezeigt werden sollen.

Da „position: static;“ die Standardpositionierung für Elemente ist, wird es häufig implizit angewendet, es sei denn, eine andere Positionierungsmethode ist spezifisch erforderlich. Dies ist der grundlegende Wert, der angibt, dass das Element gemäß der standardmäßigen HTML-Reihenfolge und dem Layout angezeigt werden soll.

position: sticky

Die CSS-Eigenschaft „position: sticky;“ wird verwendet, um ein Element relativ zum Anzeigebereich zu positionieren, bis eine bestimmte Scroll-Position erreicht ist. Hier sind die Details zu „position: sticky;“:

Verhalten je nach Scrollposition: Ein Element mit „position: sticky;“ verhält sich wie ein Element mit „position: relative;“ bis zu einem bestimmten Scrollpunkt, an dem es sich wie „position: fixed;“ verhält, und an dieser Position bleibt, während der Benutzer weiter scrollt.
Schaltverhalten: Wenn ein Element den festgelegten Grenzbereich erreicht, wird es am oberen (top) oder unteren (bottom) Rand des Anzeigebereichs „kleben“ und dort bleiben, bis der Anzeigebereich erneut verlassen wird.
Keine Überlagerung: Ein Element mit „position: sticky;“ überlagert sich nicht automatisch mit anderen Elementen und beeinflusst nicht den normalen Dokumentenfluss, es sei denn, die Grenze wird erreicht, an der das Element „kleben“ soll.
Flexibilität in der Verwendung: „position: sticky;“ eignet sich gut für die Erstellung von Haftleisten, Kopf- und Fußzeilen sowie anderen Elementen, die auf der Seite sichtbar bleiben sollen, während der Benutzer scrollt.
Kombination mit top, bottom, left und right: Sie können „top“, „bottom“, „left“ und „right“ verwenden, um den Abstand des Elements von den entsprechenden Kanten des Anzeigebereichs zu steuern, sobald das Element den Sticky-Modus erreicht hat.
Browserunterstützung: Beachten Sie, dass „position: sticky;“ möglicherweise nicht von allen Browsern vollständig unterstützt wird, insbesondere in älteren Browser-Versionen. Es ist wichtig sicherzustellen, dass die Website auch ohne diese Funktion ordnungsgemäß funktioniert.

„Position: sticky;“ ist nützlich, um Elemente zu erstellen, die beim Scrollen sichtbar bleiben sollen, ohne dass die volle Fixierung wie bei „position: fixed;“ erforderlich ist. Es ist besonders nützlich für das Erstellen von Navigationselementen und Kopfzeilen, die im Sichtbereich des Benutzers bleiben sollen, um die Benutzererfahrung zu verbessern.

position: inherit

Die CSS-Eigenschaft „position: inherit;“ gibt die Positionseigenschaft von einem übergeordneten Element an das ausgewählte Element weiter. Hier sind die Details zu „position: inherit;“:

Vererbung von Positionseigenschaften: „position: inherit;“ ermöglicht es einem Element, die Positionseigenschaft seines übergeordneten Elements zu erben, anstatt einen eigenen expliziten Positionswert festzulegen.
Kaskadierung von Eigenschaften: Wenn ein übergeordnetes Element eine bestimmte Position hat, wird diese Position durch „position: inherit;“ auf das untergeordnete Element übertragen, sofern keine anderen CSS-Regeln diese Eigenschaft überschreiben.
Flexibilität in der Layoutgestaltung: Durch die Verwendung von „position: inherit;“ können Sie sicherstellen, dass Elemente im gewünschten Layout erscheinen, auch wenn unterschiedliche Positionseinstellungen für verschiedene Teile der Seite verwendet werden.
Einsatz in komplexen Layouts: „position: inherit;“ kann in komplexen Layouts nützlich sein, in denen verschiedene Bereiche der Webseite unterschiedliche Positionierungseigenschaften haben, aber Sie sicherstellen möchten, dass bestimmte Elemente die Positionseigenschaften ihrer Elternelemente erben.
Bedeutung für die Erblichkeit von Positionseigenschaften: Dieses Konzept ist Teil des allgemeinen Prinzips der Vererbung in CSS, das sicherstellt, dass bestimmte Eigenschaften von übergeordneten Elementen auf untergeordnete Elemente übertragen werden, um die Konsistenz im Design zu gewährleisten.

Es ist wichtig zu beachten, dass „position: inherit;“ von der Position des übergeordneten Elements abhängt, und wenn das übergeordnete Element keine explizite Position festgelegt hat, wird der Standardwert „static“ vererbt. Diese Eigenschaft wird normalerweise verwendet, um sicherzustellen, dass Elemente bestimmte Layoutmerkmale ihrer Elternelemente erben, insbesondere in komplexen CSS-Layouts.

position: initial

Die CSS-Eigenschaft „position: initial;“ setzt die Position eines Elements auf den initialen Standardwert zurück, der für das betreffende Element vorgesehen ist. Hier sind die Details zu „position: initial;“:

Rücksetzen auf den Standardwert: „position: initial;“ setzt die Positionseigenschaft eines Elements auf den standardmäßigen Ausgangswert zurück, der normalerweise „static“ ist.
Anwendung auf alle Elemente: Diese Eigenschaft kann auf jedes Element angewendet werden, unabhängig von seinem vorherigen Positionswert. Wenn also zuvor eine andere Position festgelegt wurde, wird diese durch „position: initial;“ zurückgesetzt.
Zurücksetzen von Inline-Stilen: Wenn „position: initial;“ in einer CSS-Datei verwendet wird, setzt es die Position auf den Standardwert zurück, der in der Browser-Rendering-Engine für das betreffende Element definiert ist, unabhängig von den vorherigen Stilen.
Bedeutung für die Stilanpassung: „position: initial;“ ist nützlich, wenn Sie sicherstellen möchten, dass ein Element die Standardpositionierung verwendet und nicht durch zuvor festgelegte Positionseigenschaften beeinflusst wird.
Verwendung in der Entwicklungsphase: Diese Eigenschaft kann in der Entwicklungsphase nützlich sein, um sicherzustellen, dass alle Elemente auf der Seite ihre Standardpositionierung haben, bevor spezifische Positionseigenschaften festgelegt werden.

Es ist wichtig zu beachten, dass „position: initial;“ das Verhalten des Elements auf den Standardwert zurücksetzt und möglicherweise die zuvor festgelegten Positionseinstellungen überschreibt. Daher wird es normalerweise in Situationen verwendet, in denen eine explizite Zurücksetzung auf den Standardwert erforderlich ist, insbesondere wenn frühere CSS-Regeln die Position des Elements geändert haben.

position: revert

Die CSS-Eigenschaft „position: revert;“ setzt die Positionseigenschaft eines Elements auf den Wert zurück, der durch das natürliche Verhalten des Browsers oder durch vorherige CSS-Regeln festgelegt wurde. Hier sind die Details zu „position: revert;“:

Rücksetzen auf den ursprünglichen Wert: „position: revert;“ setzt die Positionseigenschaft eines Elements auf den ursprünglichen Wert zurück, der durch das natürliche Verhalten des Browsers oder durch vorherige CSS-Regeln festgelegt wurde.
Berücksichtigung der natürlichen Browser-Standards: Wenn die Positionseigenschaft zuvor durch eine andere CSS-Regel oder über JavaScript geändert wurde, setzt „position: revert;“ sie auf den natürlichen Standardwert des Browsers zurück.
Anwendung auf alle Elemente: Diese Eigenschaft kann auf jedes Element angewendet werden, unabhängig von seinem vorherigen Positionswert. Sie wird verwendet, um sicherzustellen, dass ein Element seine ursprüngliche Positionseinstellung wiedererlangt.
Bedeutung für die Rückkehr zu natürlichen Einstellungen: „position: revert;“ ist nützlich, wenn Sie sicherstellen möchten, dass ein Element seine ursprüngliche Positionseinstellung wiedererlangt, unabhängig von den zuvor festgelegten Stilen oder geänderten Positionseigenschaften.
Verwendung in der Entwicklungsphase: Diese Eigenschaft kann in der Entwicklungsphase nützlich sein, um sicherzustellen, dass alle Elemente auf der Seite ihre ursprüngliche Positionierung haben, bevor spezifische Positionseigenschaften festgelegt werden.

Es ist wichtig zu beachten, dass „position: revert;“ das Verhalten des Elements auf den Wert zurücksetzt, der durch das natürliche Verhalten des Browsers oder durch vorherige CSS-Regeln festgelegt wurde. Daher wird es normalerweise in Situationen verwendet, in denen eine explizite Rückkehr zu den natürlichen Standardwerten erforderlich ist, insbesondere wenn frühere CSS-Regeln die Position des Elements geändert haben.

position: unset

Die CSS-Eigenschaft „position: unset;“ setzt die Position eines Elements auf den Standardwert zurück, der von der natürlichen Position des Elements im normalen Dokumentenfluss oder von der Position seines übergeordneten Elements vorgesehen ist. Hier sind die Details zu „position: unset;“:

Rücksetzen auf den Standardwert: „position: unset;“ setzt die Positionseigenschaft eines Elements auf den Standardwert zurück, der normalerweise durch das normale Fließen des Dokuments oder durch die Positionseigenschaften seines übergeordneten Elements vorgesehen ist.
Berücksichtigung des normalen Flusses: Wenn die Position des Elements zuvor durch eine andere CSS-Regel oder durch JavaScript geändert wurde, setzt „position: unset;“ sie auf den Standardwert zurück, der durch das normale Fließen des Dokuments vorgesehen ist.
Anwendung auf alle Elemente: Diese Eigenschaft kann auf jedes Element angewendet werden, unabhängig von seinem vorherigen Positionswert. Sie wird verwendet, um sicherzustellen, dass ein Element seine Standardpositionierung wiedererlangt.
Bedeutung für die Rückkehr zum normalen Fluss: „position: unset;“ ist nützlich, wenn Sie sicherstellen möchten, dass ein Element seine Standardpositionierung wiedererlangt, unabhängig von den zuvor festgelegten Stilen oder geänderten Positionseigenschaften.
Verwendung in der Entwicklungsphase: Diese Eigenschaft kann in der Entwicklungsphase nützlich sein, um sicherzustellen, dass alle Elemente auf der Seite ihre Standardpositionierung haben, bevor spezifische Positionseigenschaften festgelegt werden.

Es ist wichtig zu beachten, dass „position: unset;“ das Verhalten des Elements auf den Standardwert zurücksetzt, der durch das normale Fließen des Dokuments oder durch die Positionseigenschaften seines übergeordneten Elements festgelegt ist. Daher wird es normalerweise in Situationen verwendet, in denen eine explizite Rückkehr zur normalen Standardpositionierung erforderlich ist, insbesondere wenn frühere CSS-Regeln die Position des Elements geändert haben.