Ihr könnt für einen Bereich oder ein Element die Art der Positionierung bestimmen. Verwendet wird dafür die position-Eigenschaft. Diese Eigenschaft gibt an, wie ein Element letztendlich positioniert werden soll. Insgesamt stehen dafür vier verschiedene Positionierungsvarianten zur Wahl.
• static – es wird keine spezielle Positionierung vorgenommen und ein normaler Textfluss findet statt.
• relative – es findet eine relative Positionierung statt, die sich an der Normalposition oder Anfangsposition des Elements orientiert.
• absolute – es findet eine absolute Positionierung über die Eigenschaften top, bottom, left und right statt. Absolut positionierte Elemente befinden sich außerhalb des normalen Textflusses. Berechnet wird die absolute Position relativ zu den Rändern des Elternelements (aber nur, wenn dieses nicht die Eigenschaft position: static besitzt).
• fixed – das Element wird absolut positioniert. Beim Scrollen bleibt das Element stehen.
Die ersten beiden Varianten ermöglichen eine variable Positionierung. Hier werden Elemente im Bezug aufeinander positioniert. Die folgenden zwei Beispiele zeigen, wie diese Art der Positionierung aussehen könnte:
• Element 2 wird 30 Pixel versetzt in Bezug auf Element 1 platziert.
• Element 2 wird hinter Element 1 platziert.
Anders verhält es sich mit fixed und static. Darüber lassen sich Elemente an ganz konkreten Stellen platzieren. Die Positionierungsangaben beziehen sich auf das übergeordnete Elternelement oder das Browserfenster. Ein Beispiel dazu:
• Das Element 1 wird exakt 30 Pixel vom rechten und 20 Pixel vom oberen Browserfensterrand platziert.
Nachfolgend werden die verschiedenen Varianten der Positionierung noch einmal detailliert vorgestellt. Zuvor jedoch ein Hinweis: Im Zusammenhang mit dem Positionieren von Elementen spielt das sogenannte Floaten eine wichtige Rolle. Auf dieses wichtige CSS-Prinzip gehe ich im nächsten Tutorial noch einmal ausführlich ein. Grundsätzlich geht es bei diesem Floaten darum, wie die Elemente der Webseite im Dokument fließen. Dabei werden Elemente so weit wie möglich in die jeweilige Richtung gepresst. Durch die Art der Positionierung lässt sich explizit der Elementfluss bestimmen.
Die relative Positionierung
Durch den Einsatz der relativen Positionierung über position: relative geschehen zwei Dinge:
• Die Box wird aus ihrem normalen Fluss verschoben.
• Der ursprüngliche Platz des Elements wird reserviert.
Durch die Reservierung des ursprünglichen Platzes verhalten sich die anderen Elemente so, als ob das Element tatsächlich noch an seinem Platz vorhanden ist.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Hier wurden drei Boxen definiert.
Die beiden Boxen 2 und 3 haben keine Anweisung zur Positionierung bekommen. Sie folgen daher dem normalen Dokumentfluss. Box 1 wurde hingegen relativ positioniert. Dadurch bleiben die Boxen 2 und 3 völlig unberührt von Box 1. Der Platz von Box 1 wird von diesen Boxen also nicht beansprucht. Durch die Angaben top, bottom, left und right erfolgt die Positionierung der Boxen. Bei der relativen Positionierung wird dabei von der ursprünglichen Position im Dokumentfluss (Flow) ausgegangen.
• top: 25px – die Box wird um 25 Pixel nach unten verschoben. An der normalen Position der Box werden oben also 25 Pixel eingefügt.
• right: 25px – die Box wird um 25 Pixel nach links verschoben. An der normalen Position der Box werden rechts also 25 Pixel eingefügt.
Die Pixelangaben sind relativ zur ursprünglichen Position zu sehen. Dabei bestimmen die Angaben, wo der Wert eingefügt wird, also oben und rechts. Dieser Aspekt ist entscheidend. Die Angaben legen also nicht fest, wohin die Box verschoben wird.
Die absolute Positionierung
Weiter geht es mit der absoluten Positionierung. Diese Positionsart nimmt das Element vollständig aus dem Flow heraus. Die anderen Elemente auf der Seite verhalten sich so, als ob das Element überhaupt nicht vorhanden wäre.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Auch hier wurden drei Boxen definiert. Box 1 ist absolut positioniert.
Anders als bei der relativen Positionierung ist für Box 1 kein Platz reserviert. Die Boxen 2 und 3 rutschen nach oben.
Die Positionierungsangaben top, right, bottom oder left orientieren sich jetzt nicht mehr an der ursprünglichen Position der Box im Flow. Vielmehr beziehen sich die Angaben auf das nächste umgebende Element, das mit relative, absolute oder fixed positioniert wurde. Gibt es kein umgebendes Element, erfolgt die Positionierung relativ zum obersten Element des Dokumentbaums, also zu html.
Eine Positionierung mit fixed
Mit position: fixed lassen sich Elemente fixieren. Auch hierzu ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Splitter-Effekt Teil 1</div>
<p>Nur für kurze Zeit ist das neueste Tutorial oder Video-Training in der Online-Ansicht oder der Inhalt aus der Download-Kategorie punktefrei. Erfahre hier mehr ...</p>
</body>
</html>Die fixierte Box scrollt nicht mit, sondern bleibt immer an der ihr zugewiesenen Position stehen.
Für fixierte Boxen ist das umgebende Element immer das Browserfenster.
Beachtet bitte, dass es gerade auch im Zusammenhang mit dem Fixieren von Elementen in älteren Browsern erhebliche Probleme gibt. So macht beispielsweise der IE6 hier nicht das, was er eigentlich machen sollte. Wer seine Webseiten auch für diesen Browser optimieren will/muss, hat nun zwei Möglichkeiten:
• Auf fixierte Boxen verzichten.
• Hacks für den IE verwenden.
Wenn ihr einen Hack verwenden wollt, empfehle ich euch die Seite http://thestyleworks.de/tut-art/iewinfixed.shtml. Dort wird anhand eines kleinen JavaScripts gezeigt, wie man fixierte Boxen auch für diesen Browser hinbekommt.
