Warum sorgt „bottom:0' nicht dafür, dass mein „position:sticky'-Element sofort haftet?

Warum „bottom:0“ nicht mit Position:Sticky zu funktionieren scheint

Beim Versuch, „bottom:0“ mit zu verwenden „position:sticky“ kann es zunächst so aussehen, als ob das Element nicht klebrig wird. Dies ist jedoch nicht der Fall. Um dieses Verhalten zu verstehen, untersuchen wir die Definition von „sticky“.

Gemäß der CSS-Spezifikation bleibt ein Element mit „position:sticky“ relativ positioniert, bis sein enthaltender Block einen Schwellenwert überschreitet. In diesem Szenario ist der enthaltende Block das rosafarbene „Block“-Element.

Bei der Einstellung „bottom:0“ wird das „move“-Element klebrig, wenn der untere Teil des enthaltenden Blocks im Browserfenster sichtbar wird . In Ihrem Testcode hat das „Block“-Element jedoch eine Höhe von 200 Pixel und das „Move“-Element ist darin platziert. Dies bedeutet, dass das „move“-Element standardmäßig bereits am unteren Rand des sichtbaren Bereichs innerhalb seines enthaltenden Blocks positioniert ist. Dadurch erreicht es nie den notwendigen Schwellenwert, um klebrig zu werden.

Um zu demonstrieren, wie „bottom:0“ mit „position:sticky“ funktioniert, können wir dem „block“-Element einen großen Spielraum für die Bewegung geben es vom Bildschirm. Sobald wir mit dem Scrollen beginnen, können wir beobachten, dass das „move“-Element am unteren Rand des sichtbaren Bildschirms hängen bleibt, wenn das „block“-Element über den oberen Rand des Browserfensters hinausscrollt.

Das obige ist der detaillierte Inhalt vonWarum sorgt „bottom:0' nicht dafür, dass mein „position:sticky'-Element sofort haftet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!