Position eines Div - "Fixed" - und Vertikal - "Absolute" - Horizontal innerhalb einer "Position:Relative" Div-Container

Ich bin auf der Suche nach einem Weg kann ich eine div, die werden fest auf der Seite vertikal, so dass, wenn der Benutzer scrollt das div bleibt an der gleichen Stelle auf der Seite. Aber haben es absolut positioniert horizontal, so dass, wenn der Benutzer-Bildschirm ist schmaler als meine Webseite, scrollen nach rechts oder Links wird nicht dazu führen das div verschieben mit dem Bildschirm und, in einigen Fällen bleiben entweder halb sichtbar am Rand des Bildschirms oder von der Seite komplett.

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

Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, weisen die verschiedenen Positionen der unterschiedlichen Achse der div aber dies ist der beste Weg, um zu beschreiben, die Wirkung, die ich hoffe zu erreichen.

Habe ich dies bisher, das ist im Grunde nur ein Fixed Div innerhalb von einem Relativen Div.

CSS

#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}

#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{

HTML

<div id="container">
<div id="blue-box"></div>
</div>

Habe ich auch erstellt eine jsFiddle helfen, zeigen das problem.

Dies funktioniert gut für die vertikale, aber wenn Sie die Größe Ihrer web-browser, so dass es schmaler als die gelbe box (container) und dann scrollen Sie horizontal, und die Blaue box bewegen wird, mit der Seite. Ich bin der Hoffnung, zu stoppen, dass aus geschieht.

Wenn es keine Möglichkeit gibt, dies zu erreichen durch CSS, ich bin vollkommen glücklich, JavaScript zu verwenden, solange es funktioniert mit allen modernen Browsern und sowohl IE7 und IE8. (Das ist, warum ich habe das JavaScript-tag)

Kann jemand mir helfen?

InformationsquelleAutor Flickdraw | 2011-11-30
Schreibe einen Kommentar