Hast du dich jemals gefragt, was es mit der Positionseigenschaft auf sich hat? Keine Sorge, du bist nicht alleine! Viele Anfänger im Webdesign sind neugierig auf dieses Thema. Letztens habe ich eine Frage erhalten, die ich heute mit euch teilen möchte:
“Ich bin relativ neu im Webdesign und habe Schwierigkeiten, die Unterschiede in der Positionierung von Elementen zu verstehen. Ich kenne die Begriffe absolut, fixiert und relativ. Gibt es noch andere? Und wie unterscheiden sie sich voneinander? Wann sollte man welche Positionierung verwenden?”
Kurze Antwort
Es gibt noch zwei weitere Positionierungen: statisch, die Standard-Positionierung, und sticky, eine besondere Positionierung. Ja, diese unterscheiden sich alle wesentlich voneinander! Jede hat ihre eigene Verwendungsmöglichkeit und welche du wählen solltest, hängt natürlich vom gewünschten Ergebnis ab.
Ausführlichere Antwort
Um das Thema besser zu verstehen, müssen wir zuerst verstehen, dass jedes einzeln Element auf einer Webseite ein Block ist. Ein rechteckiger Bereich aus Pixeln. Das ist leicht nachzuvollziehen, wenn du das Element als display: block; definierst oder wenn das Element standardmäßig ein Block-Level-Element ist, wie zum Beispiel ein <div>. Das bedeutet, du kannst eine Breite und Höhe festlegen und das Element wird diese berücksichtigen. Aber auch Elemente mit display: inline;, wie z.B. <span>, sind rechteckig, sie werden jedoch anders angeordnet und fließen horizontal nebeneinander.
Nun, da du dir jedes einzelne Element auf der Webseite als Block vorstellen kannst, können wir darüber sprechen, wie die Positionierung verwendet wird, um diese Blöcke genau dorthin zu platzieren, wo du sie haben möchtest.
.el { position: static; position: relative; position: absolute; position: fixed; position: sticky; position: inherit; }Statisch
Dies ist die Standardpositionierung für jedes einzelne Element auf einer Seite. Unterschiedliche Elemente haben keine unterschiedlichen Standardwerte für die Positionierung, sie starten alle als statisch. Die Positionierung als statisch hat keine besondere Bedeutung. Sie bedeutet lediglich, dass das Element wie gewohnt in die Seite fließt. Der einzige Grund, warum du ein Element auf position: static; setzen würdest, besteht darin, eine Positionierung zu entfernen, die auf ein Element angewendet wurde, das außerhalb deiner Kontrolle liegt. Dies ist jedoch recht selten, da sich Positionierungen nicht vererben.
Relative
Diese Art der Positionierung ist wahrscheinlich die verwirrendste und am häufigsten falsch verwendete. Was sie wirklich bedeutet, ist “relativ zu sich selbst”. Wenn du position: relative; auf ein Element setzt, aber keine anderen positionierungsbezogenen Attribute (top, left, bottom oder right), hat dies überhaupt keine Auswirkungen auf die Positionierung des Elements. Es bleibt genauso positioniert, als hättest du es als position: static; belassen. Wenn du dem Element jedoch andere Positionierungattribute gibst, z.B. top: 10px;, verschiebt es seine Position um 10 Pixel nach unten. Du kannst dir sicher vorstellen, wie nützlich es sein kann, ein Element basierend auf seiner regulären Position zu verschieben. Ich verwende diese Positionierung häufig, um Formularelemente auszurichten, die dazu neigen, nicht so zu stehen, wie ich es gerne hätte.
Es gibt zwei weitere Dinge, die beim Setzen von position: relative; auf ein Element passieren. Zum einen wird die Verwendung von z-index für dieses Element ermöglicht, was bei statisch positionierten Elementen nicht funktioniert. Auch wenn du keinen z-index-Wert festlegst, wird dieses Element nun auf der obersten Ebene vor anderen statisch positionierten Elementen angezeigt. Du kannst dies nicht ändern, indem du einem statisch positionierten Element einen höheren z-index-Wert zuweist.
Zum anderen beschränkt es den Geltungsbereich von absolut positionierten Kind-Elementen. Jedes Element, das ein Kind des relativ positionierten Elements ist, kann innerhalb dieses Blocks absolut positioniert werden. Dadurch ergeben sich interessante Möglichkeiten, über die ich hier spreche.
Absolut
Dies ist eine sehr leistungsstarke Art der Positionierung, mit der du jedes beliebige Element genau dort platzieren kannst, wo du es haben möchtest. Du verwendest die Positionierungsattribute top, left, bottom und right, um den genauen Standort festzulegen. Beachte, dass diese Werte relativ zum nächsten Elternelement mit relativer (oder absoluter) Positionierung sind. Wenn es kein solches Elternelement gibt, beginnt die Positionierung absolut relativ zum <html>-Element selbst, d.h. relativ zur gesamten Seite.
Der Nachteil (und das Wichtigste, woran man sich erinnern sollte) bei der absoluten Positionierung ist, dass solche Elemente aus dem Fluss der Elemente auf der Seite entfernt werden. Ein Element mit dieser Art der Positionierung wird von anderen Elementen nicht beeinflusst und beeinflusst sie auch nicht. Dies ist ein ernsthaftes Problem, das du jedes Mal berücksichtigen solltest, wenn du die absolute Positionierung verwendest. Eine übermäßige oder falsche Verwendung kann die Flexibilität deiner Webseite einschränken.
Fixiert
Ein Element mit einer fixierten Positionierung wird relativ zum Viewport, also zum Browserfenster selbst, positioniert. Der Viewport ändert sich nicht, wenn das Fenster gescrollt wird. Daher bleibt ein fixiert positioniertes Element an der gleichen Stelle, wenn die Seite gescrollt wird.
Dies kann beispielsweise für eine Navigationsleiste verwendet werden, die immer sichtbar bleiben soll, unabhängig von der Scrollposition der Seite. Die Herausforderung bei der fixierten Positionierung besteht darin, sicherzustellen, dass genügend Platz vorhanden ist, um Überlappungen mit anderen Inhalten zu vermeiden. Hier gibt es ein paar Tricks, um solche Situationen zu vermeiden.
Sticky
Sticky Positionierung ist wirklich einzigartig! Ein Sticky-Element verhält sich wie ein statisches Element und bleibt an einer bestimmten Stelle stehen. Wenn du jedoch daran vorbeiscrollst und sein Elternelement Platz bietet (normalerweise zusätzliche Höhe), verhält sich das Sticky-Element so, als wäre es fixiert, bis das Elternelement keinen Platz mehr bietet. Das mag sich in Worten komisch anhören, aber es ist leicht zu verstehen, wenn man es in einer Demo sieht.
Ähnliche Konzepte
Es gibt noch weitere Konzepte, die mit der Positionierung zusammenhängen, wie zum Beispiel Layouts wie float, flexbox und grid sowie das Box-Modell. Diese Konzepte können die Grundlage für weiteres Wissen in diesem Bereich legen.
Das war eine kurze Einführung in die verschiedenen Arten der Positionierung in CSS. Ich hoffe, dass es dir geholfen hat, die Unterschiede besser zu verstehen und zu wissen, wann du welche Art der Positionierung verwenden solltest. Viel Spaß beim Experimentieren und Erstellen großartiger Webseiten!
