Jetzt fehlt noch die fixierte Positionierung, die im Grunde eine Unterabteilung der absoluten Positionierung ist.

D.h. es gelten fast die gleichen Regeln wie für position:absolute;, außer das dort immer body als Bezugspunkt für Positionsangaben gilt. Außerdem kennt der IE 6 position:fixed; nicht und ignoriert es deshalb.

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

Bilder gibt es diesmal leider nicht, aber ich denke diesmal geht es auch ohne.

Bitte CSS ergänzen:

Wenn ihr jetzt im Browser nach unten scrollt, kommt das fixierte Element mit. Setzt ihr die Positionsangaben auf null drängelt sich das fixierte Element ganz nach oben links, kommt aber beim Scrollen immer noch mit.

Beim IE 6 passiert nix. Das fixierte Element kommt einfach nicht mit.

Zum einen kann man den IE6 dabei einfach ignorieren, es gäbe allerdings z.B. die Möglichkeit ihm per Javascript auf die Sprünge zu helfen.

Oder ihr verzichtet auf position:fixed;.

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

Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Nun ja, nicht sehr spektakulär.

Genaugenommen gibt es auch nach intensivem Studium keinen Vorher/Nachher-Effekt.

Durch position:relative; haben wir die Box zwar aus dem normalen Textfluß entfernt, sie hockt aber immer noch am gleichen Platz.

Bitte CSS ergänzen:

Das ergibt folgendes Bild im Browser:

Ihr seht, das die grüne Box die 200px von links und 50px von oben ausgehend von ihrem alten Standpunkt aus gemessen hat, einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box dahin kann und dann erst an ihren neuen Platz marschiert ist.

Mit position:relative; könnt ihr die Reihenfolge auf der z-Achse verändern. Infos dazu bietet dieser Artikel.

Absolut positionierte Boxen orientieren sich bei Positionsangaben an ihren relativ positionierten Vorfahren und nicht mehr an body.

Außerdem kann man öfter mal Darstellungsfehler im Internet Explorer beseitigen, wenn man die entsprechende Box relativ positioniert.

Manchmal wird allerdings durch relative Positionierung einer Box erst ein Darstellungsfehler im IE ausgelöst.

Das heißt in jedem Fall, das sorgfältiges Testen vonnöten ist, wenn man relativ positioniert.

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.