Absolute, Relative, Fixed Positioning: Wie unterscheiden sie sich?

Lassen Sie uns über die position-Eigenschaft sprechen. Ich weiß, dass Anfänger neugierig darauf sind. Hier ist eine Frage, die ich kürzlich erhalten habe

Ich bin ziemlich neu im Webdesign und habe die Unterschiede bei der Positionierung von Elementen noch nicht gemeistert. Ich kenne absolute, fixed und relative. Gibt es noch andere? Unterscheiden sie sich hauptsächlich? Und wann sollte man welche verwenden?

Kurze Antwort

Es gibt noch zwei weitere: static, was der Standard ist, und sticky, was eine ganz ausgefallene Sache ist. Ja, all diese unterscheiden sich maßgeblich! Jede von ihnen ist unglaublich nützlich und welche Sie verwenden sollten, hängt natürlich vom gewünschten Ergebnis ab.

Längere Antwort

Ein wichtiges Konzept, das man zuerst verstehen muss, ist, dass jedes einzelne Element auf einer Webseite ein Block ist. Buchstäblich ein Rechteck aus Pixeln. Das ist leicht zu verstehen, wenn Sie das Element auf display: block; setzen oder wenn dieses Element von Natur aus block-level ist, wie ein <div>. Das bedeutet, dass Sie eine width und eine height festlegen können und das Element diese respektiert. Aber Elemente, die display: inline; sind, wie ein <span> von Natur aus, sind *auch* Rechtecke, sie fließen nur anders auf die Seite, indem sie horizontal aneinandergereiht werden, wenn sie können.

Nun, da Sie sich jedes einzelne Seitenelement als Pixelblock vorstellen, können wir darüber sprechen, wie die Positionierung verwendet wird, um die Pixelblöcke genau dorthin zu bringen, wo Sie sie haben möchten.

.el {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
  position: inherit;
}

static

Dies ist der **Standard** für jedes einzelne Seitenelement. Verschiedene Elemente haben keine unterschiedlichen Standardwerte für die Positionierung, sie beginnen alle als static. Static bedeutet nicht viel; es bedeutet nur, dass das Element wie gewohnt in die Seite fließt. Der einzige Grund, warum Sie jemals ein Element auf position: static; setzen würden, ist, um eine Positionierung, die auf ein Element außerhalb Ihrer Kontrolle angewendet wurde, zwangsweise zu entfernen. Das ist ziemlich selten, da Positionierung nicht vererbt wird.

relative

Diese Art der Positionierung ist wahrscheinlich die verwirrendste und am häufigsten missbrauchte. Was es wirklich bedeutet ist "relativ zu sich selbst". Wenn Sie position: relative; auf ein Element setzen, aber keine anderen Positionierungsattribute (top, left, bottom oder right), hat dies keinerlei Auswirkung auf seine Positionierung, es wird genau so sein, als hätten Sie es als position: static; belassen. Aber wenn Sie ihm *doch* ein anderes Positionierungsattribut geben, sagen wir top: 10px;, wird es seine Position um 10 Pixel nach *unten* von seiner *normalen* Position verschieben. Ich bin sicher, Sie können sich vorstellen, dass die Fähigkeit, ein Element basierend auf seiner regulären Position zu verschieben, ziemlich nützlich ist. Ich benutze das oft, um Formularelemente auszurichten, die dazu neigen, sich nicht so auszurichten, wie ich es möchte.

Es gibt noch zwei andere Dinge, die passieren, wenn Sie position: relative; auf ein Element setzen, dessen Sie sich bewusst sein sollten. Erstens führt es die Fähigkeit ein, z-index auf diesem Element zu verwenden, was bei statisch positionierten Elementen nicht funktioniert. Selbst wenn Sie keinen z-index-Wert festlegen, wird dieses Element jetzt **über** jedem anderen statisch positionierten Element angezeigt. Sie können es nicht bekämpfen, indem Sie einen höheren z-index-Wert auf einem statisch positionierten Element festlegen.

Das andere, was passiert, ist, dass es **den Geltungsbereich von absolut positionierten Kindelementen einschränkt**. Jedes Element, das ein Kind des relativ positionierten Elements ist, kann innerhalb dieses Blocks absolut positioniert werden. Dies eröffnet einige mächtige Möglichkeiten, über die ich hier spreche.

absolute

Dies ist eine sehr mächtige Art der Positionierung, die es Ihnen ermöglicht, jedes Seitenelement buchstäblich genau dort zu platzieren, wo Sie es haben möchten. Sie verwenden die Positionierungsattribute top, left, bottom und right, um die Position festzulegen. Denken Sie daran, dass diese Werte relativ zum nächsten Elternelement mit relativer (oder absoluter) Positionierung sind. Wenn es keinen solchen Elternteil gibt, wird standardmäßig bis zum <html>-Element selbst zurückgegriffen, was bedeutet, dass es relativ zur Seite selbst platziert wird.

Der Kompromiss (und das Wichtigste, woran man sich erinnern muss) bei der absoluten Positionierung ist, dass diese Elemente **aus dem Fluss** der Elemente auf der Seite **entfernt** werden. Ein Element mit dieser Art von Positionierung wird von anderen Elementen nicht beeinflusst und beeinflusst andere Elemente nicht. Dies ist eine ernste Angelegenheit, die Sie jedes Mal berücksichtigen sollten, wenn Sie absolute Positionierung verwenden. Ihr übermäßiger oder unsachgemäßer Gebrauch kann die Flexibilität Ihrer Website einschränken.

fixed

Ein Element mit fixed Position wird relativ zum **Viewport** oder dem Browserfenster selbst positioniert. Der Viewport ändert sich nicht, wenn das Fenster gescrollt wird, daher bleibt ein fest positioniertes Element an seinem Platz, wenn die Seite gescrollt wird.

Dies könnte für etwas wie eine Navigationsleiste verwendet werden, die jederzeit sichtbar bleiben soll, unabhängig von der Scroll-Position der Seite. Die Sorge bei der festen Positionierung ist, dass sie Situationen verursachen kann, in denen das feste Element Inhalte überlappt, so dass es unzugänglich ist. Der Trick ist, genügend Platz zu haben, um dies zu vermeiden, und Tricks wie diese.

sticky

Sticky-Positionierung ist wirklich einzigartig! Ein sticky-Element verhält sich wie ein statisches Element, aber wenn Sie *daran* vorbeiscrollen, wird das Sticky-Element, wenn sein Elternelement Platz hat (normalerweise: zusätzliche Höhe), so behandelt, als wäre es fixed, bis dieses Elternelement keinen Platz mehr hat. Es klingt in Worten seltsam, aber es ist leicht zu sehen, was passiert in einer Demo.

Verwandte Konzepte

• Layout wie float, flexbox und grid.
• Das Box-Modell