Warum bleibt „position: sticky' mit „bottom: 0' nicht am Boden hängen?

Warum Bottom:0 nicht mit Position: Sticky funktioniert

Beim Versuch, ein Element mithilfe von Position am unteren Rand seines übergeordneten Elements zu positionieren : sticky und unten: 0, möglicherweise tritt dieses Problem auf. Obwohl Sticky ein Element effektiv an der Oberseite seines Behälters halten kann, gelingt dies nicht am Boden.

Der Grund liegt in der Definition der Position: Sticky. Der Dokumentation zufolge wird ein klebrig positioniertes Element so lange als relativ positioniert behandelt, bis sein enthaltender Block einen bestimmten Schwellenwert erreicht. Es bleibt jedoch „stecken“, wenn es auf die gegenüberliegende Kante seines umschließenden Blocks trifft.

Im bereitgestellten Code bleibt das Element mit position: sticky und unten: 0 erst dann hängen, wenn es die untere Kante seines umschließenden Blocks erreicht (in diesem Fall der rosa Block) erreicht die gegenüberliegende Kante seiner Fließwurzel (wo sich das Element befindet). Genau wie sein oberes Gegenstück wird es erst dann fest oder klebrig, wenn es die Oberkante innerhalb der Strömungswurzel erreicht.

Da sich die Unterseite des klebrigen Elements jedoch bereits an der Kante befindet, gibt es keine gegenüberliegende Kante dazu bleiben hängen. Dadurch kann das Element nicht unten fixiert werden und bleibt einfach in seiner Ausgangsposition.

Vergrößern Sie zur Veranschaulichung den Rand des Blockelements, um es außerhalb des Bildschirms zu platzieren. Wenn Sie langsam scrollen, werden Sie bemerken, dass sich das klebrige Element zum unteren Rand des rosa Blocks bewegt, sobald es seinen gegenüberliegenden (oberen) Rand innerhalb der Fließwurzel erreicht.

Das obige ist der detaillierte Inhalt vonWarum bleibt „position: sticky' mit „bottom: 0' nicht am Boden hängen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!