KS Webdesign - Der Blog

Angefangen habe ich mit diesem Artikel zur absoluten Positionierung. Fortsetzen will ich mit position:relative;.Mit fixierter Positionierung wird es enden.

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.