# Position & Transform
# Koordinatensystem
Jedes HTML-Dokument besitzt drei Achsen. Die x-Achse, um Dinge horizontal aufzuspannen und auszurichten. Die y-Achse, um Dinge vertikal aufzuspannen und auszurichten und die z-Achse, um Dinge in den Vordergrund oder Hintergrund zu bewegen.
Auch jede verschachtelte Box, die eine Breite und Höhe besitzt, hat diese Achsen. Die Position und Abstände in Bezug zu den umliegenden oder übergeordneten Elementen kann in CSS mit der Property position, sowie top, right, bottom und left kontrolliert werden.
Die folgende Grafik visualisiert das Prinzip dieses Koordinatensystems.
# Position mit CSS ändern
# position: static;
Wenn du nichts anderes in deinem CSS definierst, erhält jede Box durch den Browser als Standard den CSS-Befehl position: static;
static (statisch) bedeutet nicht, dass diese Elemente fixiert und unbeweglich sind. Vielmehr bedeutet es, dass kein Verschieben der Box stattfindet. Somit achtet die Box einfach auf das, was um sie herum an Hierarchien und Elementen vorhanden ist, und positioniert sich entsprechend dazu.
# position: relative;
Definierst du in CSS position: relative; für ein Element, verhält es sich grundsätzlich einmal wie position: static;. Es respektiert also nach wie vor die Elemente in der unmittelbaren Umgebung (Siblings) und die verschachtelten Hierarchien.
Der Unterschied liegt darin, dass du nun das Element mit top, right, bottom und left verschieben kannst. Dabei verschiebst du dieses immer vom ursprünglichen Nullpunkt aus, also von der oberen linken Ecke, die das Element mit position: static haben würde.
.item {
position: relative;
top: 30px;
left: 30px;
}
Visualisiert würde dieser Code mit position: relative zu folgendem Offset (Verschiebung) führen:
Bild: internetingishard.com
# position: absolute;
Schreibst du position: absolute; auf ein Element, orientiert es sich am Koordinatensystem eines übergeordneten Elements, welches eine position-Property hat. Hat kein übergeordnetes Element eine solche Property, so positioniert sich dein Element neu anhand des obersten Koordinatensystems, nämlich dem des html Elements. Du “reisst” sozusagen das Element aus seinem Kontext heraus. Alle umliegenden Elemente, die sich static oder relative verhalten, rücken nach. Das heisst, dass der Platz für dein Element nicht länger reserviert wird und für andere Elemente freigegeben wird.
Die Anweisung position: absolute; ist insbesondere dann praktisch, wenn du Dinge übereinanderlegen und bewegen willst.
.item {
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
}
Hinweis
Wenn du nur position: absolute; deklarierst ohne top, left etc. orientiert sich das Element immer am Nullpunkt. Also oben links. Mit z-index kannst du Elemente innerhalb derselben Hierarchiestufe auf der Z-Achse nach vorne oder nach hinten bewegen. Du bestimmst die Ebene.
Visualisiert würde dieser Code mit position: absolute zu folgender Darstellung führen:
Bild: internetingishard.com
# Absolute Positionierung innerhalb eines relativen Elements
Du erinnerst dich bestimmt an das Beispiel mit der Familienhierarchie aus dem Kapitel Absolute & Relative. Dort wurde beschrieben, dass du deine Urgrosseltern direkt fragen kannst bezüglich einer Antwort. Es sei denn, eine Hierarchiestufe dazwischen verbietet es dir. Dieses Prinzip gibt es auch in CSS und damit lassen sich sehr komplexe Layouts bauen.
Angenommen du hast position: absolute; für ein Element definiert. Wie oben beschrieben, durchsucht nun dein Element jedes übergeordnete Element nach einer vorhandenen position-Property. Falls keines gefunden wird, richtet es sich am Koordinatensystem des html-Elements aus.
Was passiert, wenn du bei einem der übergeordneten Elemente position: relative; definierst? Dann trifft genau der Fall aus dem Familienbeispiel ein. Du “verbietest” dem Element weitere Hierarchiestufen nach oben zu gehen, um nach der Property zu suchen und zwingst es, sich am Koordinatensystem des Elements auszurichten, welches position: relative; hat. Den Vorgang des Propertysuchens in höheren Hierachiestufen nennt man auch “Bubbling”, weil Luftblasen nach oben steigen.
Damit kannst du dein Layout sehr präzise steuern, Elemente überlagern und vieles mehr.
.parent {
position: relative;
}
.child {
position: absolute;
}
Visualisiert würde dieser Code mit position: relative; auf dem Parent und position: absolute; auf dem Child zu folgender Darstellung führen:
Bild: internetingishard.com
# position: fixed;
Wie der Name schon sagt, kannst du mit position: fixed; Elemente auf der Seite fixieren. Sie bleiben also auch beim Scrollen immer an der gleichen Position stehen. Ansonsten verhält sich ein Element mit position: fixed; ähnlich wie eines mit position: absolute;. Es wird also ebenfalls aus dem ursprünglichen Kontext (Flow) herausgerissen und neu platziert. Grundsätzlich orientiert sich aber ein Element mit position: fixed; immer am html-Element. Da alle anderen Elemente “nachrücken”, kann es deshalb auch oft sein, dass ein Element mit position: fixed; etwas überlagert, obwohl du das vielleicht nicht willst. Beispielsweise bei einem header, der oben fixiert sein soll. Hierbei kannst du entweder mit margin und padding für genügend Platz sorgen oder auf position: sticky; ausweichen;
header {
position: fixed;
}
Visualisiert würde dieser Code mit position: fixed; zu folgender Darstellung führen:
Bild: internetingishard.com
# position: sticky;
position: sticky; verhält sich nahezu identisch wie position: fixed; mit dem feinen Unterschied, dass es sich relativ verhält. Das bedeutet, dass ein Element nur innerhalb eines gewissen Bereiches, bzw. innerhalb des direkt übergeordneten Koordinatensystems fixiert werden kann. Ausserdem wird kein anderes Element einfach überlagert. Aufgrund des relativen Verhaltens wird für ein Element mit position: sticky; entsprechend Platz reserviert, den die umliegenden Elemente berücksichtigen müssen.
In diesem Codebeispiel (wie auch in deinem Portfolio) liegen header und main auf derselben Hierarchiestufe. Mit position: sticky; auf dem header orientiert sich dieser am nächst höheren Koordinatensystem, also dem von body. Solange body nun gescrollt werden kann, bleibt der header oben fixiert.
header {
position: sticky;
top: 0; /* Bei sticky MUSS eine Ausrichtung definiert werden */
height: 100px;
}
main {
height: 1000px;
}
Weiterführende Links
CSS Position Tester
Learn CSS Position
Position Sticky Beispiel
# Transform
Die Property transform gibt dir die Möglichkeit das aktuell ausgewählte Element auf dem eigenen, nicht auf dem übergeordneten Koordinatensystem zu verschieben.
# transform: translate();
Angenommen, du willst eine Box in der Mitte des Bildschirms platzieren. Dann würdest du wohl folgendes machen:
Wie du siehst, wurde die Box auf dem äusseren Koordinatensystem 50% nach links und 50% nach unten geschoben, jedoch ist sie dadurch nicht mittig. Das liegt daran, dass das innere Koordinatensystem der Box selbst den Nullpunkt oben links hat. Damit du dein Ziel erreichst, musst du den Nullpunkt der Box um die Hälfte der Boxbreite nach links und um die Hälfte der Boxhöhe nach oben verschieben.
Genau das kannst du mit transform: translate(); erreichen.
.box {
transform: translate(-50%, -50%); /* Erster Wert X Achse, zweiter Wert Y-Achse */
/* Alternativ kannst du die Achsen natürlich auch einzeln Steuern */
transform: translateX(-50%);
transform: translateY(-50%);
}
# transform: rotate();
Transform kann aber noch mehr. So kannst du beispielweise Elemente rotieren lassen.
.box {
transform: rotate(45deg); /* deg steht hier für degree (Grad) */
}
Ergebnis
Hinweis
Wie du am Beispiel siehst, überlagert die Box nun die horizontalen Linien. Dies geschieht, weil transform nicht das Positioning der Box ändert, sondern lediglich die visuelle Erscheinung. Der Platz, der für die Box effektiv reserviert wird, bleibt unverändert und entspricht dem ursprünglichen Wert ganz ohne jegliche transform Properties.
# transform: scale();
Mit transform: scale(); kannst du die Dimensionen des ausgewählten Elements ändern. Wie auch bei rotate hat dies keinerlei Einfluss auf den reservierten Platz oder die Positionierung der umliegenden Elemente.
.box {
transform: scale(1.5, 1.5); /* um das 1.5fache auf der X und Y Achse vergrössern */
/* Auch hier kannst du natürlich die Achsen einzeln steuern */
transform: scaleX(1.5);
transform: scaleY(1.5);
}
Ergebnis
Weiterführende Links