Pourquoi mon élément collant inférieur ne colle-t-il pas ?

Position collante et son comportement

Lorsque vous travaillez avec le positionnement CSS, la « position : collante ; » la propriété offre un comportement unique. Il permet à un élément de rester fixe dans son conteneur jusqu'à ce qu'il atteigne un certain seuil. Un malentendu courant concerne l'utilisation de « bottom : 0 ».

Le problème :

Dans l'exemple de code fourni, un bloc rose contient un bloc bleu avec « position : collant; bas : 0'. Cependant, le bloc bleu ne semble pas coller au fond de son contenant.

La solution :

Étonnamment, le code fonctionne correctement. La définition du comportement CSS « ​​collant » explique :

"Un élément positionné de manière collante reste relativement positionné jusqu'à ce que son bloc contenant franchisse un seuil spécifié dans sa racine de flux."

Dans ce cas, le bleu Le bloc n'est corrigé que lorsque l'utilisateur fait défiler la page jusqu'à ce que le bloc rose chevauche le bas de la fenêtre.

Expérimental Démonstration :

Pour créer un effet plus évident, attribuez une grande valeur de marge supérieure au bloc rose et observez pendant que vous faites défiler lentement. Le bloc bleu commencera à coller au bas à mesure que le bloc rose atteindra le bas de la zone visible de la page.

En comprenant le fonctionnement du CSS « ​​collant », vous pouvez l'utiliser efficacement pour créer des mises en page plus dynamiques qui s'ajustent et restent visibles tout au long de l'expérience de défilement.

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!