Pourquoi « position : sticky » avec « bottom : 0 » ne colle-t-il pas au bas ?

Pourquoi Bottom:0 ne fonctionne pas avec Position: Sticky

Lorsque vous essayez de positionner un élément en bas de son parent en utilisant position : collant et bottom : 0, vous pouvez rencontrer ce problème. Bien que sticky puisse efficacement maintenir un élément en haut de son conteneur, il n'y parvient pas en bas.

La raison réside dans la définition de la position : sticky. Selon la documentation, un élément positionné de manière collante est traité comme positionné relativement jusqu'à ce que son bloc contenant atteigne un seuil spécifique. Cependant, il devient "bloqué" lorsqu'il rencontre le bord opposé de son bloc conteneur.

Dans le code fourni, l'élément avec position: sticky et bottom: 0 ne deviendra bloqué qu'une fois le bas de son bloc conteneur (dans ce cas, le bloc rose) atteint le bord opposé de sa racine d'écoulement (là où se trouve l'élément). Tout comme son homologue supérieur, il ne deviendra fixe ou collant que lorsqu'il atteindra le bord supérieur dans la racine du flux.

Cependant, puisque le bas de l'élément collant est déjà au bord, il n'y a pas de bord opposé à rester coincé. De ce fait, l'élément ne pourra pas être fixé en bas et restera simplement dans sa position initiale.

Pour démontrer, augmentez la marge de l'élément bloc pour le placer en dehors de l'écran. Lorsque vous faites défiler lentement, vous remarquerez que l'élément collant se déplace vers le bas du bloc rose une fois qu'il atteint son bord opposé (supérieur) dans la racine du flux.

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!