Mischen floating-und fixed-Positionierung
hier ist ein standard, der die Verwendung von float und festen :
<html>
<head>
<style type="text/css">
#bigDiv
{
background-color: red;
height: 2000px;
width: 100px;
float: left;
}
#littleDiv
{
background-color: green;
height: 400px;
width: 200px;
float: left;
}
#littleDivFixed
{
background-color: blue;
height: 100px;
width: 200px;
position: fixed;
}
</style>
</head>
<body>
<div id="bigDiv">
</div>
<div id="littleDiv">
</div>
<div id="littleDivFixed">
</div>
</body>
</html>
_
- die "littleDiv" div ist auf der rechten Seite des "bigDiv" div, aber nicht Folgen Sie den Bildlauf,
- die "littleDivFixed" div, im Gegenteil, scrollt aber nicht gut positioniert ist, relativ zu der "bigDiv" div (es ist immer stuck an der linken Seite des Displays).
_
Ist es möglich, ein div, das sich die zwei Verhalten :
- immer auf der rechten Seite des "bigDiv" div (bei einem Konstanten Abstand von 10px),
- immer auf dem display (bei einem Konstanten Abstand von 10px von oben) ?
_
Dank im Voraus für Eure Hilfe.
InformationsquelleAutor Pragmateek | 2011-01-20
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie änderungen an der Struktur des markup?
Ich habe das Verhalten, das Sie beschreiben (im Firefox 3.6), indem zwei änderungen:
Nest littleDivFixed innerhalb von littleDiv
Also statt
haben Sie
Einen Rand hinzuzufügen, um den festen div
Einstellung
margin
stattleft
können Sie die "auto" - Links Positionierung, gleichzeitig immer noch relativ Anpassungen.froh zu helfen. Ich habe es aufgegeben, auf IE zu verzichten und bin so viel glücklicher.
InformationsquelleAutor harpo
So? Fügen Sie einfach ein
left
undtop
Attribut derfixed
divhttp://jsfiddle.net/t5bK9/
Ok, das funktioniert in Chrome und IE8 (stellen Sie sicher, dass es den standards-Modus, keine Macken), aber aus irgendeinem Grund nicht in jsFiddle. Ich bin mir nicht sicher, warum, aber es tut, was Sie wollen (denke ich). Wenn Sie wollen sicher sein, es ist immer 10px Recht vor, im Falle der divs bekommen in der Größe verändert, man könnte hinzufügen, ein onResize-listener bigDiv neu-rufen Sie die positFix Funktion.
vielen Dank, ja mit der JavaScript-Initialisierungs-das Ergebnis ist perfekt, aber ... ich kann nicht mit JavaScript, und haben zu stick mit html/css. Außerdem Größenänderung Ereignisse machen die Dinge ein wenig weniger bequem.
InformationsquelleAutor josh.trow
Können Sie auch nur hinzufügen:
und Satz:
für das richtige layout.
JSFiddle
InformationsquelleAutor simhumileco