Comment les cases de défilement influencent-elles le positionnement collant en CSS ?

Comprendre les boîtes de défilement dans le module de mise en page positionnée CSS

Le module de mise en page positionnée CSS définit le positionnement collant comme une méthode où le décalage d'une boîte est calculé par rapport à l'ancêtre le plus proche. avec une "boîte de défilement" ou la fenêtre. Cependant, la nature exacte des boîtes de défilement a suscité une certaine confusion.

Boîtes de défilement définies

Une boîte de défilement est essentiellement une boîte dans laquelle la propriété de débordement est définie sur une valeur autre que visible. Définir le débordement sur caché, par exemple, crée une boîte avec un contenu déroulant.

Impact sur le positionnement collant

Dans le contexte du positionnement collant, la boîte de défilement la plus proche d'un élément collant joue un rôle crucial . Si un ancêtre de l'élément collant a son débordement défini sur une valeur de défilement, le décalage de l'élément collant sera calculé par rapport à cette boîte de défilement.

Activer ou désactiver les boîtes de défilement

Pour contrôler si une boîte devient une boîte de défilement, il faut définir la propriété de débordement en conséquence. Définir le débordement sur visible empêche la création d'une zone de défilement, tandis que le définir sur auto, défilement ou masqué crée une zone de défilement.

Exemple

Considérons l'exemple suivant :

.wrapper {
  height: 200vh;
  border: 2px solid;
}
.wrapper > div {
  position: sticky;
  top: 0;
  height: 20px;
  background: red;
}

<div class="wrapper">
  <div></div>
</div>

Ce code crée un grand conteneur (wrapper) et un élément collant (div) à l'intérieur. Le wrapper a un débordement : caché, ce qui en fait une boîte de défilement. Lorsque l'utilisateur fait défiler la page, l'élément collant restera collé en haut de la fenêtre jusqu'à ce qu'il atteigne le haut du wrapper. À ce stade, l'élément collant cessera de défiler car il a atteint le haut de sa zone de défilement la plus proche, le wrapper.

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!