Relative Position funktioniert nicht

[Thomas J.]

Tag auch

... Ich hatte mir vorgestellt dass der TopRight- Layer, rechts neben dem Logolayer erscheinen sollte, dabei erscheint er darunter.

Du hast da etwas gründlich mißverstanden.
Nur mit position:absolute wird ein Block aus dem "normalen" Fluß herausgelöst. Mit position:relativ dagegen bleibt ein Block Teil des normalen Elementflusses.

Ein Beispiel:
<div style="width:100px;height:100px">bla</div>
<div style="width:100px;height:100px">blubb</div>
sieht in etwa so aus:

+--------+
|bla     |
|        |
|        |
+--------+
+--------+
|blubb   |
|        |
|        |
+--------+

Völlig logisch, nicht wahr?

Wenn Du nun für den Blub-Div zusätzlich eine Angabe für position:relative verwendest, wird das daraus:

<div style="width:100px;height:100px">bla</div>
<div style="position:relative; top:5px; left:5px; width:100px; height:100px">blubb</div>

+--------+
|bla     |
|        |
|        |
+--------+

+--------+
  |blubb   |
  |        |
  |        |
  +--------+

Was ist passiert?
Der Blub-Div rutscht nicht etwa nach left:5px und top:5px, sondern er wird um jeweils 5px _relativ_ zu seiner _normalen Position_ verschoben.

Für Dein Problem müßtest Du für den zweiten Layer z.B. <div style="position:relative; top:-90px; left:250px>Inhalt</div> notieren. Damit würden beide Layer direkt nebeneinander stehen, denn der zweite wurde relativ zur Normalposition um 90 Pixel nach oben und 250 Pixel nach links verschoben.

Und was lernen wir daraus?

Verwende besser position:absolute, das schont Zeit und Nerven.

Thomas J.