Ich möchte ein div mit fester Position innerhalb eines div mit overflow-y: scroll haben, was bedeutet, dass das div an Ort und Stelle bleiben soll, während der Rest des Inhalts normal scrollt. Und ich kann nicht herausfinden, was falsch ist, könnte jemand helfen? Danke im Voraus ...
%Vor%Und hier ist das HTML
%Vor% Wenn Sie position:fixed auf ein Element anwenden, positionieren Sie es in Bezug auf das Fenster selbst, nicht auf das Elternelement. Sie möchten position:absolute verwenden, um ein untergeordnetes Element in Relation zu seinem übergeordneten Element zu positionieren, solange das übergeordnete Element eine andere Position als position:static , die Standardposition, hat.
Wie Sie in Ihrem Beispiel korrekt getan haben, wenden Sie position:relative auf das übergeordnete Element .foo an und anschließend position:absolute auf das untergeordnete Element .bar . Normalerweise würde dies das gewünschte Ergebnis erzielen, indem .bar an den Anfang des übergeordneten Objekts geklickt wird, aber da ein Überlauf des untergeordneten Inhalts im übergeordneten div vorhanden ist und overflow-y:scroll das gesamte untergeordnete Element alle scrollt Inhalt, .bar muss ebenfalls scrollen. Sehen Sie sich das Top-Beispiel in meine Geige hier an.
Um das zu beheben, wickeln Sie den Inhalt, den Sie durchsuchen möchten, in einen anderen Container mit overflow-y:scroll ein und entfernen Sie overflow-y:scroll in .foo , um .bar vom Scrollen zu verhindern.
Um das Arbeitsbeispiel zu sehen, das Sie anpassen können, sehen Sie sich das untere Beispiel in meine Geige hier an.
Die Position fester Elemente bezieht sich auf das gesamte Dokument, das Sie gerade betrachten, und nicht auf das übergeordnete Element. Wenn Sie möchten, dass dies funktioniert, benötigen Sie Folgendes:
CSS
%Vor%HTML
%Vor%Hier habe ich eine Geige für dich erstellt.