Pourquoi « position : sticky » avec « bottom : 0 » se comporte-t-il à l'opposé de la description de MDN ?

Comportement opposé de la position : collant avec le bas : 0

Lors de la spécification de la position : collant avec le bas : 0, il se comporte différemment de la définition fourni par MDN. Contrairement à la description, où les éléments sont initialement traités comme positionnés relativement jusqu'à ce qu'ils dépassent un seuil et deviennent fixes, l'inverse se produit avec bottom: 0 spécifié.

Dans l'exemple de code fourni :

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN indique que l'élément de pied de page doit d'abord être positionné de manière relative jusqu'à ce qu'il se déplace à moins de 0 px du bas de la fenêtre. Cependant, le comportement observé est inverse :

• Lors du défilement vers le bas : Le pied de page commence en position fixe, puis devient relativement positionné lorsque le bas du pied de page atteint 0px du bas de la fenêtre.
• Lors du défilement vers le haut : Le pied de page commence comme positionné de manière relative, puis devient en position fixe lorsque le bas de la fenêtre le pied de page dépasse 0 px à partir du bas de la fenêtre.

Raison du comportement opposé

La clé pour comprendre ce comportement réside dans le libellé du MDN définition : "traités comme des éléments de position relative jusqu'à ce que le seuil spécifié soit dépassé."

Ceci signifie que la position initiale est déterminée par la structure HTML et la distance jusqu'au seuil spécifié. Dans le cas de bottom: 0, le pied de page est déjà en bas de la fenêtre lors du chargement de la page. Ainsi, il démarre dans un état "fixe" puisque le seuil (0px à partir du bas) est déjà dépassé.

Conclusion

Par conséquent, lors de la spécification de la position : collant avec bottom : 0, l'élément sera initialement en position fixe et passera à une position relative lorsque l'élément dépassera le bas de la fenêtre. Ce comportement est opposé au comportement décrit dans la documentation MDN car la position initiale est déterminée par la structure HTML et la proximité du seuil spécifié.

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!