16.08.2008
Position: absolute - Richtig eingesetzt (Teil II)
In Teil I wurde dargestellt, dass die Angabe position: absolute; oft zu Problemen führt, wenn man sich ihrer Bedeutung nicht bewusst ist. Nachfolgend sollen einige Beispiele gezeigt werden, wo diese Angabe sinnvoll und gezielt zum Einsatz kommt.
1. Boxen gezielt anordnen
Wir wissen aus Teil I, dass sich die absolute Positionierung auf das nächst höhere positionierte Element bezieht.
Nehmen wir deshalb wieder unsere Box, die wir diesmal gleich richtig mit folgenden Angaben horizontal zentrieren:
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 500px;
background: #8B008B;
margin: 30px auto;
position: relative;
}
Die Angabe position: relative wirkt sich auf die #box selbst nicht aus. Sie positioniert sie ohne Zusatzangaben lediglich an der Stelle, wo sie ohnehin angeordnet wäre. Die Bedeutung kommt dieser Angabe jedoch im Zusammenhang mit dem nachgeordneten Element zu: Dieses kann jetzt nämlich in Relation zu dem Element #box absolut angeordnet werden.
So können wir beispielsweise eine weitere gelbe #box1 gezielt innerhalb von #box positionieren. Ergänzen wir die CSS-Angaben wie folgt:
#box1 {
width: 250px;
height: 250px;
background: #ff0;
position: absolute;
top: 250px;
left: 250px;
}
<div id="box">
<div id="box1">
</div><!--Ende #box1-->
</div><!--Ende #box-->
In Demo 1 befindet sich die gelbe #box1 nun in der unteren rechten Ecke von #box, nämlich mit einem oberen Abstand von 250px und einem linken Abstand von 250px.
Das gleiche Ergebnis können wir auch mit den Angaben
bottom: 0;
right: 0;
2. Mit z-index die Schichtposition bestimmen
Wie unter 1. beschrieben, können mehrere Div's verschachtelt und übereinander positioniert werden. Mit Hilfe des z-index kann die "Schichtposition der Ebene" angegeben werden. Der Div mit dem höchsten z-index befindet sich dabei im Vordergrund.
Ergänzen wir das erste Beispiel um eine weitere #box2 und definieren für #box1 wie #box2 einen z-index:
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 500px;
background: #8B008B;
margin: 30px auto;
position: relative;
}
#box1 {
width: 250px;
height: 250px;
background: #ff0;
position: absolute;
top: 250px;
left: 250px;
z-index: 1;
}
#box2 {
width: 250px;
height: 250px;
background: #00CD00;
position: absolute;
top: 125px;
left: 125px;
z-index: 2;
}
<div id="box">#box
<div id="box1">#box1
</div><!--Ende #box1-->
<div id="box2">#box2
</div><!--Ende #box2-->
</div><!--Ende #box-->
Wie Demo 2 zeigt, wird die gelbe Box von der grünen überlagert, da #box2 einen höheren z-Index hat. Geben wir dagegen #box1 den z-index "2" und der box2 den z-index "1", dann wird die grüne Box von der gelben überlagert, siehe Demo 3
3. Schattenschrift mit position erzeugen
Durch Überlagerung von Div's kann man auch Schattenschriften erzeugen. Der erste Div wird hierzu relativ positioniert, der zweite in diesen eingefügt und mit absoluter Positionierung um einige Pixel verschoben:
#schrift1 {
position: relative;
z-index: 1;
font: bold 2em Verdana;
color: #FF1493;
}
#schrift2 {
position: absolute;
top: 2px;
left: 2px;
z-index: 2;
color: #00008B;
}
<div id="schrift1">Schattenschrift
<div id="schrift2">Schattenschrift</div><!--Ende #schrift2-->
</div><!--Ende #schrift1-->
Hier wird lediglich der Div #schrift2 um zwei Pixel nach unten und nach rechts in Relation zu #schrift1 versetzt und wir erhalten folgendes Ergebnis: