Ich mag position: sticky; wirklich. Es hat praktische Anwendungsfälle. Ich denke an Dinge wie das Beibehalten eines Inhaltsverzeichnisses in einer Seitenleiste eines langen Artikels, aber als ziemlich einfache Implementierung und ohne das Risiko, dass Dinge auf unangenehme Weise überlappen. Aber Elad Shechter hat hier Recht: Es wird nicht so viel verwendet – zumindest teilweise – und wahrscheinlich, weil es etwas seltsam zu verstehen ist.
Ich mag, wie Elad es mit einem "Sticky Item" und einem "Sticky Container" erklärt. Der Container muss groß genug sein, damit das Scrollen relevant ist und die "Stickiness" überhaupt etwas bewirkt.
Es gibt auch andere Stolpersteine. Ich habe das Gefühl, jedes Mal, wenn ich position: sticky; in einem realen Kontext ausprobiere, habe ich eine etwa 30%ige Chance, dass es funktioniert. Es scheint immer eine Eltern/Kind-Beziehung zu geben, die ich nicht ganz lösen kann, um Überlappungen zu verhindern. Oder es gibt ein Elternelement mit overflow: hidden;, was aus mir unbekannten Gründen dieses bricht.
Safari hat einen Fehler (letztes Jahr gemeldet), bei dem z-index nicht beachtet wird und die folgende (nicht-sticky) Div nach einer position:sticky Div immer darunter liegt – es sei denn, der Bildschirm wird neu skaliert oder aktualisiert oder die Entwicklertools werden gestartet – sehr frustrierend. Beispiel
Ich habe Ihren Code in Codepen kopiert und ihn in Safari geöffnet und er sieht für mich gut aus
https://codepen.io/chaofix/live/c921cce69341a44b01af52bcff24ba3e
Andererseits ist Ihre URL in Safari mit dem Fehler... seltsam
was gibt es auf Codepen, das diesen Fehler in Safari ignoriert?
Der Codepen-Link funktionierte nicht, also habe ich dasselbe gemacht
Also ja, es funktioniert in Codepen – verwendet Codepen seine eigene Browser-Engine, unabhängig davon, in welchem Browser es angezeigt wird?
Wenn nicht, dann muss es an der Art und Weise liegen, wie es neu lädt / aktualisiert. Der Safari-Fehler ist fehlerhaft, da er behoben wird, wenn Sie das Fenster aktualisieren oder die Größe ändern oder die Entwicklertools starten.
Ich hatte neulich Probleme damit, dass statische Elemente auf meiner Seite über meinen relativ und absolut positionierten Elementen lagen. Es hat mich verrückt gemacht, herauszufinden, warum, bis ich "position: sticky" von meinem Header entfernt habe. Alles war wieder normal danach. Dieses unvorhersehbare Verhalten lässt mich davon absehen, es in Zukunft wieder zu verwenden.