Fest positioniertes div innerhalb eines relativen Elternteils
Ich bin derzeit am bauen einer responsive Webseite und brauche ein Menü behoben werden, damit nicht scrollen, wenn der rest der Seite scrollt. das Problem ist, dass es ein fluid layout und ich möchte die "Fixer" Menüpunkt behoben werden relativ zu der mit dem übergeordneten element und nicht zum Browserfenster. gibt es trotzdem, diese kann getan werden?
InformationsquelleAutor der Frage Gavin Wood | 2011-10-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gavin,
Den Punkt, den Sie haben, ist ein Missverständnis zu positionieren. Wenn Sie möchten, es zu sein "festen" Verhältnis zu den Eltern, dann Sie wirklich wollen, Ihre
#fixed
zuposition:absolute
die Aktualisierung seiner position relativ zum übergeordneten.Diese Frage vollständig beschreibt, Positionierung Arten es gibt und wie Sie Sie effektiv nutzen können.
In der Zusammenfassung, Ihre CSS sollte
InformationsquelleAutor der Antwort Fuzzical Logic
Diese Frage kam zuerst auf Google-obwohl alt, so bin ich Entsendung der arbeiten Antwort, die ich gefunden, die von nutzen sein können, um jemand anderes.
Dieser benötigt 3 divs einschließlich der fixed-div.
HTML
CSS
InformationsquelleAutor der Antwort Leo
Eine einfache Lösung, die nicht die Rückgriff auf JavaScript und wird nicht brechen, CSS-Transformationen, ist einfach eine non-scrolling-element, das dieselbe Größe wie Ihr scrolling-element, das absolut positioniert über.
Die grundlegende HTML-Struktur wäre
parent-to-position-by
wäre die relativediv
an-position etwas fester mit Respekt.scrolling-contents
überspannen würde die Größe diesesdiv
und enthalten seine wichtigsten Inhaltefixed-elements
ist nur eine absolute positioniertdiv
über den gleichen Raum über den oberen Rand desscrolling-contents
div
.div
mit derfixed
Klasse, es erzielt den gleichen Effekt, als wenn Sie behoben wurden positioniert in Bezug auf das übergeordnetediv
. (oder das scrollen von Inhalten, da Sie span, full space)Hier ist ein js-fiddle mit einem Beispiel arbeiten
InformationsquelleAutor der Antwort KernelDeimos
Dies ist möglich, wenn Sie bewegen Sie den festen
<div>
mit Margen und nicht Positionen:Und das HTML:
Spielen, um mit diesem jsfiddle.
InformationsquelleAutor der Antwort JCOC611
hier ist eine generische Lösung, die nicht, hängt von der Menü - /Kopf-Höhe.
seine voll ansprechbar, Reine CSS-Lösung, Funktioniert Super auf IE8+, Firefox, Chrome, Safari, opera.
unterstützt Inhalte scrollen, ohne die Menü/Header.
Testen Sie es mit Arbeitet Fiddle
Html:
Der CSS:
InformationsquelleAutor der Antwort avrahamcool
Eine einfache Sache, die Sie tun können, ist Ihre position fixed DIV relativ zu dem rest der Seite mit % - Werten.
Schauen Sie sich dieses jsfiddle hierwo die festen DIV ist eine sidebar.
Sowie eine kurze Bild unten beschreibt das layout oben:
InformationsquelleAutor der Antwort afable
kann man den wrapper mit absoluten Positionierung.
und die geben im inneren div eine Feste position.
und
div drinnen, dass
versuchen Sie dies, Es könnte für Sie arbeiten
InformationsquelleAutor der Antwort Mandar Kawtakwar
Versuchen, Position:sticky auf das parent-element.
InformationsquelleAutor der Antwort Lohit Bisen