CSS: Positionierung – position
Über die Eigenschaft position lässt sich die Position eines Elements innerhalb des allgemeinen Layouts eines Dokuments manipulieren.
Die Eigenschaft erwartet einen der folgenden Werte:
• static (im normalen Textfluss des Elternelements)
• relative (relativ zum normalen Textfluss des Elternelements)
• absolute (absolute Position relativ zum letzten positionierten Vorfahren)
• fixed (unbeweglich im Viewport/Browserfenster)
Mit den folgenden Eigenschaften wird die konkrete Position des Elements festgelegt:
• left (Position von links)
• right (Position von rechts)
• top (Position von oben)
• bottom (Position von unten)
• z-index (Ebene in der Stapelreihenfolge)
Statische Position – position:static;
Der Wert static ist die Voreinstellung der Eigenschaft position. Das entsprechende Element wird ganz gewöhnlich im normalen Textfluss des Elternelements positioniert. Mit diesem Wert können alle, möglicherweise an anderer Stelle zugewiesenen Positionseigenschaften eines Elements zurückgesetzt werden. Angaben wie top oder left haben hier keine Wirkung.
Beispiel:
<div style='position:static;background-color:#aaa;padding:20px;'>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
Dieses Beispiel wird im Browser so dargestellt:
Relative Position – position:relative;
Über den Wert relative wird die Position eines Elements relativ zum Elternelement festgelegt. Zusätzliche Angaben wie top oder left bestimmen die genaue Position. Auch wenn das Element seinen Platz durch Verschieben ›verlassen‹ hat, so wird die ursprünglich beanspruchte Fläche bei position:relative; aber erhalten.
Beispiel:
<div style='position:relative;left:100px;top:-20px;background-color:#aaa;padding:20px;margin-bottom:14px;'>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
Dieses Beispiel wird im Browser so dargestellt:
Absolute Position – position:absolute;
Über den Wert absolute lässt sich ein Element relativ zu dem letzten Vorfahren positionieren, der seinerseits mit relative, absolute oder fixed positioniert wurde. Wurde kein Vorfahre positioniert, so wird das Element relativ zum <body>-Element positioniert. Das Element wird völlig aus dem Textfluss herausgelöst, so dass nachfolgende Elemente im Gegensatz zu dem Verhalten bei position:relative; seinen Platz einnehmen.
<div style='background-color:yellow;padding:20px;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;'>
<div style='background-color:magenta;padding:20px;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;left:10px;top:10px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;'>Hallo Welt 3</div>
</div>
</div>
</div>
Wie man sieht, wird das <div>-Element mit dem roten Hintergrund relativ zum grünen <div>-Element positioniert (jeweils 10 Pixel Abstand von links und oben), obwohl das direkte Elternelement der blaue <div>-Container ist, der aber nicht positioniert ist:
Fixierte Position – position:fixed;
Über den Wert fixed wird ein Element relativ zum Viewport, also zum Browserfenster positioniert. Wird der Seiteninhalt gescrollt, so scrollt das Element nicht mit, sondern bleibt im Fenster stehen.
Die rote ›Klick mich!‹-Fläche am linken Bildschirmrand ist das Beispiel für diese Art der Positionierung.
Beispiel:
<style>
#fixed { position:fixed; top:180px; left:0; opacity:.8; width:100px; background-color:red; padding:10px; }
#fixed:hover { opacity:0; cursor:default; }
</style>
<div id='fixed'>
<b>Klick mich!</b>
</div>
Ebene in der Stapelreihenfolge – z-index
Über die Eigenschaft z-index lässt sich die Überlappung positionierter Elemente manipulieren. Elemente mit einem hohen z-index werden oberhalb von Elementen mit einem niedrigen z-index gerendert. Dies gilt aber nur für Geschwisterelemente, also für Elemente, die Kinder des selben Elternelements sind.
Negative Werte sind für z-index zulässig.
Elemente mit keinem oder dem gleichen z-index überlappen sich in der Reihenfolge ihres Auftretens im DOM.
Beispiel:
<div style='background-color:yellow;padding:20px;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;'>
<div style='background-color:magenta;padding:20px;position:relative;z-index:1;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;left:10px;top:70px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;z-index:2;'>Hallo Welt 3</div>
</div>
</div>
</div>
Ein z-index wird für ein Element nur dann wirksam, wenn es mit relative, absolute oder fixed positioniert wurde. Im Beispiel wird das rote Element (z-index:0) von dem hellblauen Element (z-index:1) überlagert, da das hellblaue positioniert ist. Die Eigenschaft z-index:2 des orangenen Elements hat dagegen keine Wirkung, da dieses Element nicht positioniert ist.
Für positionierte Elemente gilt, dass sie einander in der Reihenfolge ihres Auftretens im DOM überlappen. Elternelemente liegen unterhalb von Kindelementen, und nachfolgende Geschwisterelemente liegen über vorangehenden:
<div style='background-color:yellow;padding:20px;position:relative;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;position:relative;'>
<div style='background-color:magenta;padding:20px;position:relative;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;left:-30px;top:50px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;position:relative;'>Hallo Welt 3</div>
</div>
</div>
</div>
Darstellung des Beispiels:
Die Reihenfolge lässt sich zwischen Geschwisterelementen über die Eigenschaft z-index manipulieren:
<div style='background-color:yellow;padding:20px;position:relative;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;position:relative;'>
<div style='background-color:magenta;padding:20px;position:relative;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;z-index:1;left:-30px;top:50px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;position:relative;'>Hallo Welt 3</div>
</div>
</div>
</div>
Kindelemente haben als Voreinstellung den z-index:0, auch wenn er nicht explizit angegeben ist. Geschwisterelemente mit einem z-index größer als 0 werden darüber liegend gerendert:
Kindelemente erben den z-index ihres Elternelements nicht:
<div style='background-color:yellow;padding:20px;position:relative;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;position:relative;z-index:3;'>
<div style='background-color:magenta;padding:20px;position:relative;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;z-index:1;left:-30px;top:50px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;position:relative;'>Hallo Welt 3</div>
</div>
</div>
</div>
In diesem Beispiel würde man möglicherweise erwarten, dass das rote <div>-Element unterhalb des dunkelblauen gerendert wird, da das rote einen niedrigeren z-index besitzt. Dem ist aber nicht so, da Kindelemente immer oberhalb der Elternelemente gerendert werden.
Bei Kindelemente beginnt die Zählung der Ebenen wieder bei 0:
<div style='background-color:yellow;padding:20px;position:relative;'>
<div style='background-color:green;padding:20px;position:relative;'>
<div style='background-color:blue;padding:20px;position:relative;z-index:3;'>
<div style='background-color:magenta;padding:20px;position:relative;z-index:2;'>Hallo Welt 1</div>
<div style='background-color:red;padding:20px;position:absolute;z-index:1;left:-30px;top:50px;'>Hallo Welt 2</div>
<div style='background-color:orange;padding:20px;position:relative;'>Hallo Welt 3</div>
</div>
</div>
</div>
Obwohl das dunkelblaue <div>-Element den z-index:3 besitzt, hat dessen orangenes Kindelement offenbar den z-index:0, da es vom roten (z-index:1) überlagert wird, welches wiederum vom hellblauen (z-index:2) überlagert wird.