CSS für Anfänger: Unterschied zwischen relativer und absoluter Positionierung

18. März 2011

sura1

CSS für Anfänger: relative und absolute Positionierung

CSS - Cascading Style Sheets

Basierend auf meinem Artikel CSS für Anfänger: Der normale Fluss von div-Boxen vom 10. März 2011 möchte ich Ihnen heute in der Reihe CSS für Anfänger den Unterschied zwischen relativer und absoluter Positionierung erklären.

Die Grundlage zu meinen nachfolgenden Erläuterungen bilden die 3 verkürzten Boxen im Fluss aus dem Beispiel vom 10.3.2011.
Mein Tipp: Um die nachfolgenden Erklärungen zu verstehen, sollten Sie unbedingt vorher meinen oa. Blogartikel lesen!

Ausführliche Beschreibungen zum Thema CSS Position:absolute-relative
CSS-Positionierung — Kästchen verschieben
Der Flow und Positionieren mit position

Definition CSS-Eigenschaft: position

Der CSS-Befehl position legt fest, auf welche Art und Weise die Position einer Box berechnet wird.

a) Definition – position: relative

[Beispiel ansehen: Grafik oder Demo-Link anklicken!]

Demo ansehen!

Die relative Positionierung mit position: relative macht 2 Dinge:

1. Sie verschiebt die Box von ihrer normalen Position im Fluss
2. Sie markiert den ursprünglichen Platz des Elementes 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

<body>
<div id=“anders“>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>

CSS:

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
width: 40%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#anders {
position: relative;
top: 25px;
right: 25px;
background-color: #f3c600;
}

Die Boxen 2 und 3 verändern sich also überhaupt nicht. 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 CSS-Eigenschaften top, right, bottom und left, die bei der relativen Positionierung von der ursprünglichen Position im Fluss (Flow) aus gemessen werden:

top: 25px drückt die Box 1 nach unten. An der normalen Position der Box werden oben 25px eingefügt
right: 25px schiebt die Box 1 nach links, sodass sie zum Teil verschwindet. An der ursprünglichen Position werden rechts 25 Pixel eingefügt

Alle Angabe 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.

b) Definition – position: absolute

[Beispiel ansehen: Grafik oder Demo-Link anklicken!]

Demo ansehen!

Im Gegensatz zur relativen nimmt die absolute Positionierung das Element komplett aus dem Fluss heraus. Das Element wird – bildlich gesprochen – hoch gezogen, und alle anderen Elemente verhalten sich so, als ob es gar nicht da wäre.

Das HTML für dieses Beispiel ist gleich, im CSS wird genau ein(!) Wort geändert. Die CSS-Anweisung position: relative wird durch die Anweisung position: absolute ersetzt.

HTML

<body>
<div id=“anders“>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>

CSS:

body {
color: black;
background-color: gray;
padding: 0;
margin: 0;
}
div  {
width: 40%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#anders {
position: absolute;
top: 25px;
right: 25px;
background-color: #f3c600;
}

Nur ein einziges Wort wird geändert, aber die Wirkung ist enorm. Box 1 steht plötzlich rechts, und die Boxen 2 und 3 rutschen nach oben. Absolut positionierte Elemente werden aus dem Fluss herausgehoben und liegen über den anderen Elementen.

Die genaue Position wird wieder durch top, right, bottom oder left angegeben, aber die Werte für diese 4 CSS-Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss:

Die absolute Positionierung eines Elements bezieht sich auf das nächste umschließende Element, das mit relative, absolute oder fixed positioniert ist.
Falls kein positioniertes umschließendes Element vorhanden ist (kommt in der Praxis häufig vor), erfolgt die Positionierung relativ zum obersten Element des Dokumentenbaumes, und das ist nicht body, sondern html.

Diese beiden Aussagen kann man abschließend wie folgt zusammenfassen:

• Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.
• Es gibt zwei verschiedene mögliche Bezugspunkte:
- ein umgebendes, positioniertes Element
- das Stammelement html.

Quellen:

a)Ausführliche Beschreibungen zum Thema CSS-Position absolute-relative
CSS-Positionierung — Kästchen verschieben
Der Flow und Positionieren mit position

b) Little Boxes – Teil 1

c) Webseiten
Little Boxes – Webseiten gestalten mit HTML und CSS
Little Boxes 1 – Online lesen
Little Boxes – Beispieldateien