Basierend auf meinem Artikel CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen vom 24. Oktober 2009 möchte ich Ihnen heute in der Reihe CSS/HTML-Tricks 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 24.10.2009.
3 verkürzte Boxen im Fluss
Der Quellcode bzw. die CSS-Formatierung sieht dazu wie folgt aus:
HTML-Quellcode:
1 2 3 4 5 | <body> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 | body { color: black; background-color: gray; padding: 0; margin: 0; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } |
[Beispiel ansehen: Grafik oder Demo-Button anklicken!]
Unterschied zwischen absoluter und relativer Positionierung
Die Eigenschaft
positionlegt fest, auf welche Art und Weise die Position einer Box berechnet wird.
Relative Positionierung: relative
Die relative Positionierung mit position: relative; macht 2 Dinge:
• Sie verschiebt die Box von ihrer normalen Position im Fluss.
• 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-Code:
1 2 3 4 5 | <body> <div id="anders">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body { color: black; background-color: gray; padding: 0; margin: 0; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #anders { position: relative; top: 25px; right: 25px; background-color: #f3c600; } |
[Beispiel ansehen: Grafik oder Demo-Button anklicken!]
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 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.
Absolute Positionierung: absolute
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-Code:
1 2 3 4 5 | <body> <div id="anders">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | body { color: black; background-color: gray; padding: 0; margin: 0; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #anders { position: absolute; top: 25px; right: 25px; background-color: #f3c600; } |
[Beispiel ansehen: Grafik oder Demo-Button anklicken!]
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:
a) Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.
b) Es gibt zwei verschiedene mögliche Bezugspunkte: [ein umgebendes, positioniertes Element | das Stammelement html]
Download Beispieldateien | Relative – Absolute Positionierung (1,5KB Zip-Datei)
Quellnachweis:
Little Boxes -Teil 1
Webseiten gestalten mit CSS. Grundlagen.
Markt + Technik / 2007 / Dozent Peter Müller
www.little-boxes.de (Peter Müller )
http://little-boxes.de/downloads/beispieldateien.html#beispieldateien (Beispieldateien)
Ausführliche Informationen zur Positionierung mit CSS:
http://jendryschik.de/wsdev/einfuehrung/eigenschaften/positionierung
http://www.mediaevent.de/tutorial/positionieren.html
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.de.html.net/tutorials/css/lesson14.asp
http://www.thestyleworks.de/ref/position.shtml
http://www.validome.org/doc/HTML_ge/css/eigenschaften/positionierung.htm
Ähnliche Artikel:
CSS/HTML-Tricks: Der normale Fluss (Flow) von 3 div-Boxen
CSS-Tricks: Listen mit grafischen Aufzählungszeichen
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 1
Die Gestaltung von Hyperlinks mit Hilfe von CSS – Teil 2
CSS-Tricks: Bereits besuchte Links mit sogenannten Checkmarks extra kennzeichnen
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Tags: absolute Positionierung, bottom, CSS Grundlagen, CSS-Positionierung, HTML Grundlagen, left, Little Boxes, position:absolute, position:relative, relative Positionierung, right, top, www.little-boxes.de
