Moin!

Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben

Das ist der entscheidende Satz!

Deine Grafik, die als Hintergrundbild des alle Zeilen umschließenden DIVs eingebaut ist, ist zu lang, weil deine Zeilen alle nur relativ positioniert sind, an ihrem Ursprungsort aber weiterhin Platz wegnehmen.

position:relative ist daher der falsche Weg für deine Texte. position:absolute wäre viel schlauer, da nehmen die Elemente am Ursprungsort keinen Platz mehr weg.

position:absolute richtet sich bei den Koordinaten für top und left nach dem umschließenden Element, welches eine von position:static (das ist der Normalfall, wenn keine Angabe erfolgt) verschiedene Positionierung hat. Siehe das Beispiel bei SELFHTML zu position: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

position:relative wäre so eine Positionierung, die von static verschieden ist.  Wenn du diese auf das DIV mit dem Hintergrundbild anwendest und keine Angaben zu top und left machst, bleibt das Bild an seinem Ort, bildet aber selbst einen Rahmen für die inneren Elemente, die mit position:absolute dann platziert werden können - die linke obere Ecke des DIVs ist dabei "top:0; left:0".

- Sven Rautenberg