Wenn es um Erklärungen geht, wo man anhand einer Beispieldatei sofort mit basteln kann wird die Luft schon ziemlich dünn.

Deshalb sorge ich mit dem folgenden Tutorial dafür, dass die Luft in dem Bereich a weng dicker wird.

Legen wir direkt los:

Hier findest du die position-absolute-anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß. Für alle gilt position:static;. Das ist die Standardeinstellung (default-Einstellung) der Browser, die immer dann zum Tragen kommt, wenn man nix gemacht hat.

Das position:static; wird vom Browser praktisch unsichtbar eingefügt, ohne das er uns bescheid sagt.

Jetzt wollen wir den Textfluß mal durcheinanderwirbeln indem wir ein Element positionieren und damit die Standardeinstellung der Browser überschreiben.

Bitte CSS ergänzen:

Im Browser schaut es so aus:

Umpff! Die rote Box ist weg.

Egal, wir haben die Möglichkeit für die Positionierung Werte zu vergeben.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Aha, die rote Box hat sich also nur hinter der grünen versteckt. Allerdings springt die grüne Box nach ganz oben links ins Browserfenster, wenn wir als Wert für die Positionierung jeweils null eintragen.

Das heißt erst mal, das sich die absolut positionierte Box an body orientiert wenn man Werte für top und left eingibt.

Die nächste Erkenntnis die sich uns aufdrängt ist die, dass die absolute Box von den anderen Boxen ignoriert wird. Die anderen Boxen tun so als wäre die absolute Box nicht vorhanden.

Also sind absolut positionierte Elemente komplett aus dem normalen Textfluß raus.

Wenn sich die absolute Box immer an body orientiert ist das doch ganz schön nervig, weil man immer erst die richtigen Werte ausbaldowern muss, um eine Darstellung an der gewünschten Stelle zu erreichen.

Das geht einfacher:

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Wenn der umgebende Container (#wrapper) position:relative; bekommt orientiert sich die absolute Box daran und nicht mehr an body.

Zu beachten ist dabei, dass die relative Box HasLayout für den IE 6 u. 7 bekommen sollte, da es passieren kann, dass die Positionsangaben sonst evtl. nicht richtig ausgeführt werden.

Für Anfänger ist das durchaus verführerisch alle Elemente mit position:absolute; festzutackern, um so die gewünschte Darstellung zu erhalten.

Okay, dann nehmt mal position:relative; weg und setzt die Werte für top/left auf null. Danach verkleinert ihr mal das Browserfenster stark.

Ihr seht dann hoffentlich was ich meine.

position:absolute; sollte man mit Bedacht einsetzen, denn damit ändert ihr wie gesehen auch die Stapelreihenfolge auf der z-Achse, d.h. zu euch hin oder von euch weg.

Wenn ihr an weiteren Infos über Stapelung interessiert seid könnte dieser Artikel von mir noch in Frage kommen.

Was gibts noch zu sagen?

Es kann vorkommen das absolut positionierte Boxen Im IE 6 u. 7 nicht angezeigt werden, wenn sie im Quelltext unmittelbar neben einem Float liegen.

Abhilfe schafft entweder ein leeres divzwischen dem Float und der absoluten Box in den Quelltext zu schreiben, oder entweder den Float oder die absolute Box in ein div zu wickeln. Entscheidend dabei ist die unmittelbare Nachbarschaft von Float und absoluter Box aufzulösen.

Erhellendes dazu findet ihr in dieser Untersuchung von Bruno Fassini.

Zur relativen Positionierung gibt es mittlerweile schon einen Artikel.

Die fixierte Positionierung habe ich auch nicht vergessen.