Warum verhält sich die Sticky-Positionierung „bottom:0' anders als die MDN-Beschreibung?

Warum unterscheidet sich die Angabe von „bottom: 0“ für die Sticky-Positionierung von der MDN-Beschreibung?

Die Eigenschaft „position:sticky“ führt ein hybrides Verhalten ein zwischen relativer und fester Positionierung. Es ahmt eine relative Position nach, bis ein bestimmter Schwellenwert erreicht ist, und wechselt dann zu einer festen Position.

In Ihrem Codeausschnitt, in dem „bottom: 0“ festgelegt ist, scheint das Verhalten jedoch umgekehrt zu sein beschrieben im MDN-Artikel. Das Element beginnt als fest und geht nach dem Scrollen über einen Schwellenwert in relativ über.

Der Grund für diese Diskrepanz liegt im Wortlaut der MDN-Definition:

„Sticky-Positionierung kann als Hybrid betrachtet werden.“ von relativer und fester Positionierung wird als relativ positioniert behandelt, bis es einen bestimmten Schwellenwert überschreitet, und an diesem Punkt wird es als fixiert behandelt, bis es seine Grenze erreicht übergeordnetes Element.“

Der Schlüsselbegriff hier ist „bis es einen bestimmten Schwellenwert überschreitet“. In Ihrem Code überschreitet das Element bereits den angegebenen Schwellenwert (den unteren Rand des Ansichtsfensters), wenn die Seite zum ersten Mal gerendert wird. Daher wechselt es sofort in den festen Positionierungszustand, auch wenn „bottom: 0“ angibt, dass der Schwellenwert von „relativ“ zu „fest“ übergehen soll.

Zusammenfassend lässt sich sagen, dass bei der Angabe von „bottom: 0“ für ein klebriges Element zunächst „fixiert“ gestartet wird weil der Schwellenwert bereits erreicht ist und dann in den relativen Zustand übergeht, wenn das Element wieder nach oben über den unteren Rand des Ansichtsfensters gescrollt wird. Dieses Verhalten steht im Einklang mit der MDN-Definition, die verwendete Sprache kann jedoch etwas verwirrend sein.

Das obige ist der detaillierte Inhalt vonWarum verhält sich die Sticky-Positionierung „bottom:0' anders als die MDN-Beschreibung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!