Pourquoi mon élément collant avec « bottom : 0 » ne semble-t-il pas coller ?

Comprendre le positionnement collant CSS et son comportement avec le haut et le bas

Le positionnement collant CSS permet à un élément de rester fixe dans son bloc conteneur jusqu'à ce qu'un un seuil spécifique est franchi, où il devient alors relativement positionné. Cependant, il semble y avoir une différence lors de l'utilisation de « bottom : 0 » avec des éléments collants.

Explication du problème :

Considérez le code suivant :

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

Lorsque 'move' est réglé sur 'top:0', il colle au haut du bloc rose, se comportant comme prévu. Cependant, lorsque 'move' est défini sur 'bottom:0', il semble se détacher et ne reste plus fixe.

Comprendre le comportement de 'bottom:0' avec des éléments collants :

Pour comprendre ce comportement, il est crucial de saisir la définition de sticky positionnement :

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

Dans le cas de 'bottom: 0', l'élément collant n'est pas visible car il est collé au bord inférieur de son bloc conteneur. Lorsque la position de défilement dépasse le seuil, le bloc conteneur monte, mais l'élément collant reste fixé au bord inférieur. Étant donné que l'élément collant est déjà en bas, il ne peut pas se déplacer davantage vers le haut.

Pour observer le comportement collant, assurez-vous que le bloc contenant a une hauteur suffisante pour accueillir l'élément collant. En fournissant une marge supérieure significative à l'élément de bloc, vous pouvez faire défiler la page et voir l'élément collant adhérer au bas

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!