Platziere einen Div "Fixed" vertikal und "Absolute" horizontal innerhalb eines "Position: Relative" Container Div

Ich suche nach einer Möglichkeit, ein div zu erstellen, das vertikal auf der Seite fixiert wird. Wenn der Benutzer also nach unten scrollt, bleibt das div an der gleichen Stelle auf der Seite. Wenn der Benutzerbildschirm jedoch schmaler als meine Webseite ist, führt das Scrollen nach rechts oder links nicht dazu, dass sich das div mit dem Bildschirm bewegt, und in einigen Fällen bleibt es auch nur halb am Rand des Bildschirms sichtbar oder ganz von der Seite entfernt.

Dieses div muss innerhalb einer "Position: Relative" Div.

Ich bin ziemlich sicher, dass es keine Möglichkeit gibt, der variierenden Achse eines Div verschiedene Positionen zuzuweisen, aber dies ist der beste Weg, den Effekt zu beschreiben, den ich erreichen möchte.

Ich habe das bisher, das ist im Grunde nur eine feste Div innerhalb einer relativen Div.

CSS

HTML

Ich habe auch ein jsFiddle erstellt, um das Problem zu demonstrieren.

Dies funktioniert gut für die Vertikale, aber wenn Sie Ihren Webbrowser so anpassen, dass er schmaler ist als das gelbe Feld (Container) und dann horizontal scrollt, wird das blaue Feld mit der Seite verschoben. Ich hoffe, damit aufzuhören.

Wenn es nicht möglich ist, dies über CSS zu erreichen, bin ich sehr glücklich, JavaScript zu verwenden, solange es mit allen modernen Browsern und IE7 und IE8 funktioniert. (Deshalb habe ich das JavaScript-Tag hinzugefügt)

Kann mir jemand helfen?