Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
12.3 Versetzt weiterfließen: position: relative
Die relative Positionierung mit position: relative macht zwei Dinge:
- Sie verschiebt die Box von ihrer normalen Position im Fluss.
- Sie markiert den ursprünglichen Platz des Elements als geschützt.
Die anderen Elemente im Dokument verhalten sich so, als ob das Element noch an seinem ursprünglichen Platz im normalen Fluss steht. HTML und CSS werden für dieses Beispiel ein klein wenig geändert:
| HTML | CSS |
|---|---|
| <body> <div id="anders">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> |
body { color: black; background-color: gray; padding: 0; margin:0; } div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #anders { position: relative; top: 25px; right: 25px; background-color: #f3c600; } |
Und hier das Ergebnis:
Beachten Sie, dass Box 2 und 3 sich überhaupt nicht verändern. Bei der relativen Positionierung bleibt die ursprüngliche Position des Elements wie gesagt geschützt und wird nicht von den nachfolgenden Elementen beansprucht.
Ein positioniertes Element bekommt seine genauen Koordinaten mit den Eigenschaften top, right, bottom und left, die bei der relativen Positionierung von der ursprünglichen Position im Flow aus gemessen werden:
- top:25px drückt die Box nach unten. An der normalen Position der Box werden oben 25 Pixel eingefügt.
- right:25px schiebt die Box nach links, sodass sie zum Teil verschwindet. An der ursprünglichen Position werden rechts 25 Pixel eingefügt.
Alle Angaben sind relativ zur ursprünglichen Position und geben an, wo der Wert eingefügt wird, und nicht, in welche Richtung die Box geschoben werden soll. Eigentlich logisch, aber position:relative wirkt auf den ersten Blick ein bisschen wie von hinten durch die Brust ins Auge.