Absolute & Relative

Wie du bereits in vorherigen Kapiteln gesehen hast, stehen viele Dinge in einer Beziehung (Relation) oder Abhängigkeit zueinander. Ein fundamentales Konzept im Webdevelopment ist daher die Unterscheidung zwischen Dingen, die relativ zueinander oder absolut zum root (höchste Hierarchiestufe) stehen.

Analogie/Beispiel

Ein üblicher Aufbau einer Familie sieht folgendermassen aus:

Urgrosseltern
Grosseltern
Eltern
Und hier bist DU

Du stehst also, metaphorisch gesehen, ganz unten in der Hierarchie. Möchtest du nun eine Frage an deine Urgrosseltern richten, gibt es zwei Möglichkeiten:

1. Alle in der Hierarchie verhalten sich relativ zueinander. Du richtest deine Frage an deine Eltern, haben diese keine Antwort auf die Frage, stellen sie diese deinen Grosseltern. Haben diese wieder keine Antwort auf die Frage, werden deine Urgrosseltern gefragt. Haben auch deine Urgrosseltern keine Antwort, gehst du leer aus, da es in unserem Beispiel keine höhere Hierarchiestufe gibt, die gefragt werden könnte. Du hast also den root (den Ursprung, die Wurzel) erreicht.

2. Du verhältst dich absolut und überspringst damit die Hierarchiestufen. Du stellst deine Frage also direkt deinen Urgrosseltern – es sei denn, jemand in der Hierarchie zwingt dich, dass du dich relativ zu verhalten hast. Falls das niemand tut, richtet sich deine Frage immer an die höchste Hierarchiestufe, in unserem Beispiel also deine Urgrosseltern bzw. an den root.

In Bezug auf HTML entstehen solche Hierarchien durch das Nesting (Verschachtelung) der Elemente (DOM-Nodes) ineinander. Also einem übergeordneten parent-Element und einem untergeordneten child-Element. Jedes dieser Elemente kann mit Inhalten, Einstellungen und weiteren child-Elementen versehen werden. In Bezug auf das Beispiel wäre also unser html-Element deine Urgrosseltern, header, main und footer die Grosseltern und so weiter.

In CSS können untergeordneten childs von ihren parents Werte und Einstellungen erben. Ähnlich wie im echten Leben. Inheritance (Vererbung) nennt sich dieses Konzept. So kann ein child beispielsweise die Dimensionen (Breite, Höhe) und Positionen, die Schriftart, die Farbe und viele weitere Dinge erben. In Bezug auf unser Beispiel bedeutet das also, das ein child “seine Frage” immer an die nächst höhere Hierarchiestufe parent stellt, bis es eine Antwort erhält, mit der es etwas anfangen kann bzw. bis es Werte erhält, die es erben kann.

CSS Position

Jede Box, also jedes Element, das Höhe, Breite und Abstände haben kann, verhält sich grundsätzlich relativ. Es achtet darauf, welche Hierarchien und andere Elemente vorhanden sind und richtet sich danach aus.

In CSS kannst du eine Box aber auch absolut positionieren. Dabei wird sie aus ihrem Kontext herausgelöst und neu positioniert. Wenn dies keine andere Hierarchiestufe verbietet (siehe Beispiel oben), richtet sie sich am root-Element aus. Das ist grundsätzlich immer das html Tag.

Im Kapitel Position & Transform werden wir noch weiter auf die Positionierung von Elementen mit CSS eingehen.

Pfade

Dateipfade für Ordnerstrukturen können ebenfalls absolut oder relativ definiert werden. Ein absoluter Pfad umfasst meist den kompletten Pfad vom root Verzeichnis bis zur tiefsten gewünschten Hierarchiestufe. Ein absoluter Pfad ist also unveränderlich.

Absolut

/* Beispiel für einen absoluten Pfad einer Website */
https://google.com

/* Ein Beispiel für einen absoluten Pfad auf einem Windows Computer */
C:\Documents\Jane\Portfolio\index.html	

Angenommen, du würdest sämtliche Bilder und Dateien deines Portfolios mit absoluten Pfaden wie im Beispiel (C:\Documents\Kilian\Portfolio\index.html) aufbauen. Dies hätte zur Folge, dass dein Portfolio ausschliesslich auf deinem eigenen Gerät funktionieren würde, weil diese Ordner auch nur auf deinem eigenen Gerät vorhanden sind. Kopierst du dieses auf das Gerät eines Kollegen oder auf einen Webserver, so können anderen Geräte diesen Pfad nicht finden.

Deshalb empfiehlt es sich mit relativen Pfaden zu arbeiten. Ein relativer Pfad achtet nur auf die Hierarchiestufen in seiner unmittelbaren Umgebung. Dadurch kann sich alles Übergeordnete bis hin zum root verändern, ohne die Funktionsweise zu zerstören.

Relativ

/* Beispiel für einen relativen Pfad der sich immer an der Position der index.html orientiert. */
/img/about.jpg

/* Beispiel für einen relativen Pfad der sich am selben Verzeichnis orientiert, wo er sich befindet. */
img/about.jpg

/* Beispiel für einen relativen Pfad der sich am übergeordneten Verzeichnis orientiert, wo er sich befindet. */
../img/about.jpg

/* Beispiel für einen relativen Pfad der sich zwei Hierarchiestufen (zwei Verzeichnisse) höher orientiert, wo er sich befindet. */
../../img/about.jpg

Masseinheiten

Auch Masseinheiten in CSS arbeiten mit dem Absolute & Relative Konzept. So können beispielsweise mit px (CSS Pixel) oder pt (Punkt) absolute Werte verwendet werden, um Grössen festzulegen. Oder aber relative Masseinheiten wie % (Prozent) oder solche, die sich an der Bildschirm- oder Schriftgrösse orientieren.

Im folgenden Kapitel werden wir noch detaillierter auf die verschiedenen Masseinheiten eingehen.