Pourquoi « bottom:0 » ne fait-il pas coller mon élément « position:sticky » immédiatement ?

Pourquoi "bottom:0" ne semble pas fonctionner avec Position:Sticky

Lorsque vous essayez d'utiliser "bottom:0" avec "position:sticky", il peut initialement sembler que l'élément ne devient pas collant. Cependant, ce n’est pas le cas. Pour comprendre ce comportement, examinons la définition de « sticky ».

Selon la spécification CSS, un élément avec « position:sticky » reste positionné relativement jusqu'à ce que son bloc conteneur franchisse un seuil. Dans ce scénario, le bloc conteneur est l'élément rose « block ».

Lors de la définition de « bottom:0 », l'élément « move » deviendra collant lorsque le bas du bloc conteneur deviendra visible dans la fenêtre du navigateur. . Cependant, dans votre code de test, l'élément "block" a une hauteur de 200px et l'élément "move" est placé à l'intérieur. Cela signifie que par défaut, l'élément "move" est déjà positionné en bas de la zone visible au sein de son bloc conteneur. Par conséquent, il n'atteint jamais le seuil nécessaire pour devenir collant.

Pour démontrer comment "bottom:0" fonctionne avec "position:sticky", nous pouvons donner une grande marge à l'élément "block", en déplaçant hors de l'écran. Une fois que nous commençons le défilement, nous pouvons observer que l'élément "move" commence à coller au bas de l'écran visible lorsque l'élément "block" défile au-delà du haut de la fenêtre du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!